
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="https://blog.csdn.net/heshihu2019/article/details/102673258"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="report" content='{"spm":"1001.2101","extra":{"tsab":"t_1"},"pid":"blog"}'>
    <meta name="referrer" content="always">
    <meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="alternate" media="handheld" href="#" />
    <meta name="shenma-site-verification" content="5a59773ab8077d4a62bf469ab966a63b_1497598848">
    <meta name="applicable-device" content="pc">
    <link  href="https://g.csdnimg.cn/static/logo/favicon32.ico"  rel="shortcut icon" type="image/x-icon" />
    <title>这可能是全网最详细的Node.js编程_node项目代码_程序员达芬奇的博客-CSDN博客</title>
    <script>
      (function(){ 
        var el = document.createElement("script"); 
        el.src = "https://s3a.pstatp.com/toutiao/push.js?1abfa13dfe74d72d41d83c86d240de427e7cac50c51ead53b2e79d40c7952a23ed7716d05b4a0f683a653eab3e214672511de2457e74e99286eb2c33f4428830"; 
        el.id = "ttzz"; 
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(el, s);
      })(window)
    </script>
        <meta name="keywords" content="node项目代码">
        <meta name="csdn-baidu-search"  content='{"autorun":true,"install":true,"keyword":"node项目代码"}'>
    <meta name="description" content="NodeJS起步下载安装下载历史版本windows下安装过程：此安装路径尽量不要改对于已经装过的，重新安装就会升级安装成功后，打开命令行，输入node --version 或者 node -v  (显示node的版本号)表示安装成功其他平台的安装方式： https://nodejs.org/zh-cn/download/package-manager/R......_node项目代码">
        <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/css/detail_enter-95840df9c6.min.css">
    <script type="application/ld+json">{"@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld","@id":"https://blog.csdn.net/heshihu2019/article/details/102673258","appid":"1638831770136827","pubDate":"2019-10-21T22:13:44","title":"这可能是全网最详细的Node.js编程_node项目代码_程序员达芬奇的博客-CSDN博客","upDate":"2019-10-24T01:26:46"}</script>
        <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-number/skin-number-2c93789924.min.css">
    <script src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var isCorporate = false;//注释删除enterprise
        var username =  "heshihu2019";
        var skinImg = "white";
        var blog_address = "https://blog.csdn.net/heshihu2019";
        var currentUserName = "sachuangwei";
        var isOwner = false;
        var loginUrl = "http://passport.csdn.net/account/login?from=https://blog.csdn.net/heshihu2019/article/details/102673258";
        var blogUrl = "https://blog.csdn.net/";
        var avatar = "https://profile-avatar.csdnimg.cn/default.jpg!1";
        var articleTitle = "这可能是全网最详细的Node.js编程";
        var articleDesc = "NodeJS起步下载安装下载历史版本windows下安装过程：此安装路径尽量不要改对于已经装过的，重新安装就会升级安装成功后，打开命令行，输入node --version 或者 node -v  (显示node的版本号)表示安装成功其他平台的安装方式： https://nodejs.org/zh-cn/download/package-manager/R......_node项目代码";
        var articleTitles = "这可能是全网最详细的Node.js编程_node项目代码_程序员达芬奇的博客-CSDN博客";
        var nickName = "程序员达芬奇";
        var articleDetailUrl = "https://blog.csdn.net/heshihu2019/article/details/102673258";
        if(window.location.host.split('.').length == 3) {
            blog_address = blogUrl + username;
        }
        var skinStatus = "White";
        var blogStaticHost = "https://csdnimg.cn/release/blogv2/"
        var mallTestStyle = "control"
    </script>
    <script src="https://g.csdnimg.cn/??fixed-sidebar/1.1.7/fixed-sidebar.js" type="text/javascript"></script>
    <script src='//g.csdnimg.cn/common/csdn-report/report.js' type='text/javascript'></script>
    <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css">
    <style>
        .MathJax, .MathJax_Message, .MathJax_Preview{
            display: none
        }
    </style>
    <script src="https://dup.baidustatic.com/js/ds.js"></script>
</head>
  <body class="nodata " style="">
        <script>
            var toolbarSearchExt = '{"landingWord":["node项目代码"],"queryWord":"","tag":["前端"],"title":"这可能是全网最详细的Node.js编程"}';
        </script>
    <script src="https://g.csdnimg.cn/common/csdn-toolbar/csdn-toolbar.js" type="text/javascript"></script>
    <script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
    </script>

    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/pc/css/blog_code-01256533b5.min.css">
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/chart-3456820cac.css" />
    <link rel="stylesheet" href="https://g.csdnimg.cn/lib/swiper/6.0.4/css/swiper.css" />
    <script src="https://g.csdnimg.cn/lib/swiper/6.0.4/js/swiper.js" async></script>
    <script>
      var articleId = 102673258;
      var commentscount = 0;
      var curentUrl = "https://blog.csdn.net/heshihu2019/article/details/102673258";
      var myUrl = "https://my.csdn.net/";
        var highlight = ["node.js","node","详细","全网","代码","可能","项目","前端","编程"];//高亮数组
        var isRecommendModule = true;
          var isBaiduPre = true;
          var baiduCount = 2;
          var setBaiduJsCount = 10;
      var share_card_url = "https://app-blog.csdn.net/share?article_id=102673258&username=heshihu2019"
      var articleType = 1;
      var baiduKey = "node项目代码";
      var userNewReport = true;
      var copyPopSwitch = true;
      var needInsertBaidu = true;
      var recommendRegularDomainArr = ["blog.csdn.net/.+/article/details/","download.csdn.net/download/","edu.csdn.net/course/detail/","ask.csdn.net/questions/","bbs.csdn.net/topics/","www.csdn.net/gather_.+/"]
      var codeStyle = "";
      var baiduSearchType = "baidulandingword";
      var sharData = "{\"hot\":[{\"id\":1,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a5f4260710904e538002a6ab337939b3.png\"},{\"id\":2,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/188b37199a2c4b74b1d9ffc39e0d52de.png\"},{\"id\":3,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/14ded358b631444581edd98a256bc5af.png\"},{\"id\":4,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/1470f23a770444d986ad551b9c33c5be.png\"},{\"id\":5,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c329f5181dc74f6c9bd28c982bb9f91d.png\"},{\"id\":6,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/ccd8a3305e81460f9c505c95b432a65f.png\"},{\"id\":7,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/bc89d8283389440d97fc4d30e30f45e1.png\"},{\"id\":8,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/452d485b4a654f5592390550d2445edf.png\"},{\"id\":9,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/f8b9939db2ed474a8f43a643015fc8b7.png\"},{\"id\":10,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/6de8864187ab4ed3b1db0856369c36ff.png\"},{\"id\":11,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/673cc3470ff74072acba958dc0c46e2d.png\"},{\"id\":12,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/930c119760ac4491804db80f9c6d4e3f.png\"},{\"id\":13,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/15e6befb05a24233bc2b65e96aa8d972.png\"},{\"id\":14,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/2075fd6822184b95a41e214de4daec13.png\"},{\"id\":15,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/859b1552db244eb6891a809263a5c657.png\"},{\"id\":16,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/0be2f920f1f74290a98921974a9613fd.png\"},{\"id\":17,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/2e97e00b43f14afab494ea55ef3f4a6e.png\"},{\"id\":18,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/ff4ab252f46e444686f5135d6ebbfec0.png\"},{\"id\":19,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/ae029bbe99564e79911657912d36524f.png\"},{\"id\":20,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b3ece39963de440388728e9e7b9bf427.png\"},{\"id\":21,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/6f14651a99ba486e926d63b6fa692997.png\"},{\"id\":22,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/83ceddf050084875a341e32dcceca721.png\"},{\"id\":23,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b90368b8fd5d4c6c8c79a707d877cf7c.png\"},{\"id\":24,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/aeffae14ecf14e079b2616528c9a393b.png\"},{\"id\":25,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c5a06b5a13d44d16bed868fc3384897a.png\"},{\"id\":26,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/08b697658b844b318cea3b119e9541ef.png\"},{\"id\":27,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/68ccb0b8d09346ac961d2b5c1a8c77bf.png\"},{\"id\":28,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a2227a247e37418cbe0ea972ba6a859b.png\"},{\"id\":29,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/3a42825fede748f9993e5bb844ad350d.png\"},{\"id\":30,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/8882abc1dd484224b636966ea38555c3.png\"},{\"id\":31,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/4f6a5f636a3e444d83cf8cc06d87a159.png\"},{\"id\":32,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/1953ef79c56b4407b78d7181bdff11c3.png\"},{\"id\":33,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c04a2a4f772948ed85b5b0380ed36287.png\"},{\"id\":34,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/5b4fecd05091405ea04d8c0f53e9f2c7.png\"},{\"id\":35,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b89f576d700344e280d6ceb2a66c2420.png\"},{\"id\":36,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/1c65780e11804bbd9971ebadb3d78bcf.png\"},{\"id\":37,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/d590db2055f345db9706eb68a7ec151a.png\"},{\"id\":38,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/fe602f80700b4f6fb3c4a9e4c135510e.png\"},{\"id\":39,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/39ff2fcd31e04feba301a071976a0ba7.png\"},{\"id\":40,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/f9b61b3d113f436b828631837f89fb39.png\"},{\"id\":41,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/df1aca5f610c4ad48cd16da88c9c8499.png\"},{\"id\":42,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/d7acf73a1e6b41399a77a85040e10961.png\"},{\"id\":43,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b7f1b63542524b97962ff649ab4e7e23.png\"}],\"vip\":[{\"id\":1,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101150.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101154.png\"},{\"id\":2,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101204.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101208.png\"},{\"id\":3,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101211.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101215.png\"},{\"id\":4,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101218.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101220.png\"},{\"id\":5,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101223.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101226.png\"},{\"id\":6,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100635.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100639.png\"},{\"id\":7,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100642.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100644.png\"},{\"id\":8,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100647.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100649.png\"},{\"id\":9,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100652.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100655.png\"},{\"id\":10,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/55de67481fde4b04b97ad78f11fe369a.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/bb2418fb537e4d78b10d8765ccd810c5.png\"},{\"id\":11,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/579c713394584d128104ef1044023954.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/f420d9fbcf5548079d31b5e809b6d6cd.png\"},{\"id\":12,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/75b7f3155ba642f5a4cc16b7baf44122.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a9030f5877be401f8b340b80b0d91e64.png\"},{\"id\":13,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/0903d33cafa54934be3780aa54ae958d.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/2cd8c8929f5a42fca5da2a0aeb456203.png\"},{\"id\":14,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/949fd7c22884439fbfc3c0e9c3b8dee7.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/dafbea9bd9eb4f3b962b48dc41657f89.png\"},{\"id\":15,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/4119cfddd71d4e6a8a27a18dbb74d90e.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c56310c8b6384d9e85388e4e342ce508.png\"},{\"id\":16,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/121575274da142bcbbbbc2e8243dd411.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/5013993de06542f881018bb9abe2edf7.png\"},{\"id\":17,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/4d97aa6dd4fe4f09a6bef5bdf8a6abcd.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/76f23877b6ad4066ad45ce8e31b4b977.png\"},{\"id\":18,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/fdb619daf21b4c829de63b9ebc78859d.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a1abe5d27a5441f599adfe662f510243.png\"},{\"id\":19,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/676b7707bb11410f8f56bc0ed2b2345c.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/7ac5b467fbf24e1d8c2de3f3332c4f54.png\"},{\"id\":20,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/0becb8cc227e4723b765bdd69a20fd4a.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/fdec85b26091486b9a89d0b8d45c3749.png\"},{\"id\":21,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/1a6c06235ad44941b38c54cbc25a370c.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/410a06cda2d44b0c84578f88275caf70.png\"}],\"map\":{\"hot\":\"热门\",\"vip\":\"VIP\"}}";
      
      var canRead = true;
      var blogMoveHomeArticle = false;
      var showPcWindowAd = false;
      var showHeadWord = true;
      var showSearchText = "";
      var linkPage = true;
      var articleSource = 1;
      var articleReport = '{"spm":"1001.2101","extra":{"tsab":"t_1"},"pid":"blog"}';
      var isShowToQuestion = false;
        var baiduSearchChannel = 'pc_relevant'
        var baiduSearchIdentification = '.235^v38^pc_relevant_sort_base2'
        var distRequestId = '1688003439960_65686'
        var initRewardObject = {
          giver: "sachuangwei",
          anchor: "heshihu2019",
          articleId: "102673258",
          sign: "ecb85bf7f2608529e3828b0c479562da",
        }
        var isLikeStatus = false;
        var isUnLikeStatus = false;
        var studyLearnWord = "";
        var isCurrentUserVip = false;
        var contentViewsHeight = 0;
        var contentViewsCount = 0;
        var contentViewsCountLimit = 5;
        var isShowConcision = true
      var isCookieConcision = false
      var isHasDirectoryModel = false
      var isShowSideModel = false
      var isShowDirectoryModel = true
      function getCookieConcision(sName){
        var allCookie = document.cookie.split("; ");
        for (var i=0; i < allCookie.length; i++){
          var aCrumb = allCookie[i].split("=");
          if (sName == aCrumb[0])
            return aCrumb[1];
        }
        return null;
      }
      if (getCookieConcision('blog_details_concision') && getCookieConcision('blog_details_concision') == 0){
        isCookieConcision = true
        isShowSideModel = true
        isShowDirectoryModel = false
      }
    </script>
        <div class="main_father clearfix d-flex justify-content-center mainfather-concision" style="height:100%;">
          <div class="container clearfix container-concision" id="mainBox">
          <script>
          if (!isCookieConcision) {
            $('.main_father').removeClass('mainfather-concision')
            $('.main_father .container').removeClass('container-concision')
          }
          </script>
          <main>
<script type="text/javascript">
    var resourceId =  "";
    function getQueryString(name) {   
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象  
      var r = window.location.search.substr(1).match(reg);  //匹配目标参数
      if( r != null ) return decodeURIComponent( r[2] ); return '';   
    }
    function stripscript(s){ 
      var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]") 
      var rs = ""; 
      for (var i = 0; i < s.length; i++) { 
        rs = rs+s.substr(i, 1).replace(pattern, ''); 
      } 
      return rs;
    }
    var blogHotWords = stripscript(getQueryString('utm_term')).length > 1 ? stripscript(getQueryString('utm_term')) : ''
</script>
<div class="blog-content-box">
    <div class="article-header-box">
        <div class="article-header">
            <div class="article-title-box">
                <h1 class="title-article" id="articleContentId">这可能是全网最详细的Node.js编程</h1>
            </div>
            <div class="article-info-box">
                <div class="article-bar-top">
                    <img class="article-type-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" alt="">
                    <div class="bar-content">
                      <a class="follow-nickName " href="https://blog.csdn.net/heshihu2019" target="_blank" rel="noopener" title="程序员达芬奇">程序员达芬奇</a>
                    <img class="article-time-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUpTime2.png" alt="">
                    <span class="time">已于&nbsp;2022-06-23 17:46:44&nbsp;修改</span>
                    <img class="article-read-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" alt="">
                    <span class="read-count">1277</span>
                    <a id="blog_detail_zk_collection" class="un-collection" data-report-click='{"mod":"popu_823","spm":"1001.2101.3001.4232","ab":"new"}'>
                        <img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollect2.png" alt="">
                        <img class="article-collect-img article-heard-img collect-status isactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" alt="">
                        <span class="name">收藏</span>
                        <span class="get-collection">
                            8
                        </span>
                    </a>
                    </div>
                </div>
                <div class="blog-tags-box">
                    <div class="tags-box artic-tag-box">
                            <span class="label">分类专栏：</span>
                                <a class="tag-link" href="https://blog.csdn.net/heshihu2019/category_11698971.html" target="_blank" rel="noopener">前端</a>
                            <span class="label">文章标签：</span>
                                <a data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"前端","ab":"new","extra":"{\"searchword\":\"前端\"}"}' class="tag-link" href="https://so.csdn.net/so/search/s.do?q=%E5%89%8D%E7%AB%AF&amp;t=all&amp;o=vip&amp;s=&amp;l=&amp;f=&amp;viparticle=" target="_blank" rel="noopener">前端</a>
                    </div>
                </div>
                <div class="up-time"><span>于&nbsp;2019-10-24 01:26:46&nbsp;首次发布</span></div>
                <div class="slide-content-box">
                    <div class="article-copyright">
                        <div class="creativecommons">
                            版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
                        </div>
                        <div class="article-source-link">
                            本文链接：<a href="https://blog.csdn.net/heshihu2019/article/details/102673258" target="_blank">https://blog.csdn.net/heshihu2019/article/details/102673258</a>
                        </div>
                    </div>
                </div>
                
                <div class="operating">
                    <a class="href-article-edit slide-toggle">版权</a>
                </div>
            </div>
        </div>
    </div>
    <div id="blogHuaweiyunAdvert"></div>
        <div id="blogColumnPayAdvert">
            <div class="column-group">
                <div class="column-group-item column-group0 column-group-item-one">
                    <div class="item-l">
                        <a class="item-target" href="https://blog.csdn.net/heshihu2019/category_11698971.html" target="_blank" title="前端"
                        data-report-view='{"spm":"1001.2101.3001.6332"}'
                        data-report-click='{"spm":"1001.2101.3001.6332"}'>
                            <img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
                            <span class="title item-target">
                                <span>
                                <span class="tit">前端</span>
                                    <span class="dec">专栏收录该内容</span>
                                </span>
                            </span>
                        </a>
                    </div>
                    <div class="item-m">
                        <span>3 篇文章</span>
                        <span>0 订阅</span>
                    </div>
                    <div class="item-r">
                            <a class="item-target article-column-bt articleColumnFreeBt" data-id="11698971">订阅专栏</a>
                    </div>
                </div>
            </div>
        </div>
    <article class="baidu_pl">
        <div id="article_content" class="article_content clearfix">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-25cebea3f9.css">
                <div id="content_views" class="markdown_views prism-atom-one-dark">
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                    </svg>
                    <h1><a id="NodeJS_0"></a>NodeJS起步</h1> 
<h2><a id="_1"></a>下载安装</h2> 
<ul><li><a href="https://nodejs.org/zh-cn/download/">下载</a></li></ul> 
<ul><li><a href="https://nodejs.org/en/download/releases/">历史版本</a><br /> <img src="https://img-blog.csdnimg.cn/20191021221803310.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eI7Vhijj-1571667161241)(.\img\Snipaste_2018-09-16_18-20-26.png)]" /><br /> windows下安装过程&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191021222643711.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 此安装路径尽量不要改<br /> <img src="https://img-blog.csdnimg.cn/20191021222310927.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191021222805159.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191021222903760.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 对于已经装过的&#xff0c;重新安装就会升级<br /> 安装成功后&#xff0c;打开命令行&#xff0c;输入</li></ul> 
<pre><code class="prism language-php">node <span class="token operator">--</span>version 或者 node <span class="token operator">-</span><span class="token function">v</span>  <span class="token punctuation">(</span>显示node的版本号<span class="token punctuation">)</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191021223015602.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 表示安装成功<br /> 其他平台的安装方式&#xff1a; https://nodejs.org/zh-cn/download/package-manager/</p> 
<h2><a id="REPL_19"></a>REPL环境</h2> 
<p><img src="https://img-blog.csdnimg.cn/20191021223908774.png" alt="在这里插入图片描述" /></p> 
<pre><code class="prism language-php">node 回车进入<span class="token constant">REPL</span>环境
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191021223430715.png" alt="在这里插入图片描述" /></p> 
<pre><code class="prism language-php">ctrl <span class="token operator">&#43;</span> 两次c 退出<span class="token constant">REPL</span>环境
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191021223620299.png" alt="在这里插入图片描述" /><br /> node中的REPL环境类似于浏览器中的 Console控制台 &#xff0c;可以做一些代码测试。<br /> 然而 我们写代码肯定不是在控制台中写,而是写在一个test.js文件中.</p> 
<pre><code class="prism language-php"><span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">&#61;</span> <span class="token number">3</span><span class="token punctuation">;</span>
console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token operator">&#43;</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191021224656460.png" alt="在这里插入图片描述" /><br /> 又或者在vs code编辑器在终端打开文件<br /> <img src="https://img-blog.csdnimg.cn/20191021225025800.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<h1><a id="Node__39"></a>Node 中的模块</h1> 
<p><strong>浏览器(客户端)中的JS</strong><br /> <img src="https://img-blog.csdnimg.cn/20191021225921535.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>Node中的JS</strong><br /> <img src="https://img-blog.csdnimg.cn/20191021230005955.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<h2><a id="_44"></a>核心模块的使用</h2> 
<h3><a id="FS_45"></a>FS模块</h3> 
<p>node核心模块之一&#xff0c;用于操作文件&#xff1b;<a href="http://nodejs.cn/api/fs.html">中文手册</a></p> 
<ul><li>文件读写</li></ul> 
<pre><code class="prism language-php">fs<span class="token operator">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> data<span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
</code></pre> 
<pre><code class="prism language-php"><span class="token operator">&#43;</span> file <span class="token operator">&lt;</span><span class="token keyword type-declaration">string</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span>Buffer<span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span><span class="token constant">URL</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span>integer<span class="token operator">&gt;</span> 文件名或文件描述符。
<span class="token operator">&#43;</span> data <span class="token operator">&lt;</span><span class="token keyword type-declaration">string</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span>Buffer<span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span>TypedArray<span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span>DataView<span class="token operator">&gt;</span>
<span class="token operator">&#43;</span> options <span class="token operator">&lt;</span><span class="token keyword type-declaration">Object</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span><span class="token keyword type-declaration">string</span><span class="token operator">&gt;</span>
<span class="token operator">&#43;</span> encoding <span class="token operator">&lt;</span><span class="token keyword type-declaration">string</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token operator">&lt;</span><span class="token constant">null</span><span class="token operator">&gt;</span> 默认值<span class="token punctuation">:</span> <span class="token string single-quoted-string">&#39;utf8&#39;</span>。
	<span class="token operator">-</span> mode <span class="token operator">&lt;</span>integer<span class="token operator">&gt;</span> 默认值<span class="token punctuation">:</span> <span class="token number">0o666</span>。
<span class="token operator">&#43;</span> flag <span class="token operator">&lt;</span><span class="token keyword type-declaration">string</span><span class="token operator">&gt;</span> 参阅支持的文件系统标志。默认值<span class="token punctuation">:</span> <span class="token string single-quoted-string">&#39;w&#39;</span>。
<span class="token operator">&#43;</span> callback <span class="token operator">&lt;</span><span class="token keyword">Function</span><span class="token operator">&gt;</span>
	<span class="token operator">-</span> err <span class="token operator">&lt;</span>Error<span class="token operator">&gt;</span>
</code></pre> 
<p>当 file 是一个文件名时&#xff0c;异步地将数据写入到一个文件&#xff0c;如果文件已存在则覆盖该文件。 data 可以是字符串或 buffer。<br /> 当 file 是一个文件描述符时&#xff0c;行为类似于直接调用 fs.write()&#xff08;建议使用&#xff09;。<br /> 如果 data 是一个 buffer&#xff0c;则 encoding 选项会被忽略。</p> 
<pre><code class="prism language-php"><span class="token keyword">const</span> data <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>Buffer<span class="token operator">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;Node.js中文网&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
fs<span class="token operator">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;文件.txt&#39;</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">throw</span> err<span class="token punctuation">;</span>
  console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;文件已被保存&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>如果 options 是一个字符串&#xff0c;则它指定字符编码&#xff1a;</p> 
<pre><code class="prism language-php">fs<span class="token operator">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;文件.txt&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;Node.js中文网&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;utf8&#39;</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>在同一个文件上多次使用 fs.writeFile() 且不等待回调是不安全的。 对于这种情况&#xff0c;建议使用 fs.createWriteStream()。</p> 
<ul><li>实例<br /> fs.读文件.js</li></ul> 
<pre><code class="prism language-js"><span class="token comment">// 引入模块</span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// console.log(typeof fs); //object </span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1-2 从文件中读取内容</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./tt.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
	<span class="token comment">// 回调函数 (读取成功后执行的函数)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;---------------&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1-1 向文件中写入内容</span>
<span class="token comment">// fs.writeFile(&#39;./tt.txt&#39;,&#39;老路&#39;,function(err){<!-- --></span>
<span class="token comment">//     if(!err){<!-- --></span>
<span class="token comment">//         console.log(&#39;写入成功&#39;);</span>
<span class="token comment">//     }</span>
<span class="token comment">// });</span>
</code></pre> 
<p>先去注释执行 1-1再执行1-2&#xff0c;效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191022102817771.png" alt="在这里插入图片描述" /><br /> <strong>注意</strong>&#xff1a;向文件中写入内容时&#xff0c;没有该文件会自动创建文件再运行写入内容&#xff0c;node有异运行机制&#xff0c;打印111显然比文件的读写快。</p> 
<ul><li>追加内容<br /> 原理一句话解释&#xff1a;<strong>读完追加在写入</strong><br /> fs.写文件.js</li></ul> 
<pre><code class="prism language-js"><span class="token comment">// 引入模块</span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 向文件中追加内容</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./tt.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span>d</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    d<span class="token operator">&#43;&#61;</span><span class="token string">&#39;2344&#39;</span><span class="token punctuation">;</span>
    fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&#39;./tt.txt&#39;</span><span class="token punctuation">,</span>d<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;写入失败&#39;</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;写入成功&#39;</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191022104036956.png" alt="在这里插入图片描述" /></p> 
<h3><a id="HTTP_120"></a>HTTP模块</h3> 
<p>node核心模块之一&#xff0c;用于搭建HTTP服务器&#xff1b;<a href="http://nodejs.cn/api/http.html">中文手册</a><br /> <img src="https://img-blog.csdnimg.cn/20191022104520707.png" alt="在这里插入图片描述" /><br /> 要使用 HTTP 服务器和客户端&#xff0c;必须 require(‘http’)。<br /> Node.js 中的 HTTP 接口旨在支持传统上难以使用的协议的许多特性。 特别是&#xff0c;大块的、可能块编码的消息。 接口永远不会缓冲整个请求或响应&#xff0c;用户能够流式传输数据。<br /> HTTP 消息头由如下对象表示&#xff1a;</p> 
<pre><code class="prism language-php"><span class="token punctuation">{<!-- --></span> <span class="token string single-quoted-string">&#39;content-length&#39;</span><span class="token punctuation">:</span> <span class="token string single-quoted-string">&#39;123&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;content-type&#39;</span><span class="token punctuation">:</span> <span class="token string single-quoted-string">&#39;text/plain&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;connection&#39;</span><span class="token punctuation">:</span> <span class="token string single-quoted-string">&#39;keep-alive&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;host&#39;</span><span class="token punctuation">:</span> <span class="token string single-quoted-string">&#39;mysite.com&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;accept&#39;</span><span class="token punctuation">:</span> <span class="token string single-quoted-string">&#39;*/*&#39;</span> <span class="token punctuation">}</span>
</code></pre> 
<p>键是小写的。值不能被修改。<br /> 为了支持所有可能的 HTTP 应用程序&#xff0c;Node.js 的 HTTP API 都非常底层。 它仅进行流处理和消息解析。 它将消息解析为消息头和消息主体&#xff0c;但不会解析具体的消息头或消息主体。<br /> 有关如何处理重复消息头的详细信息&#xff0c;参阅 message.headers。<br /> 接收到的原始消息头保存在 rawHeaders 属性中&#xff0c;该属性是 [key, value, key2, value2, …] 的数组。 例如&#xff0c;上面的消息头对象可能具有的 rawHeaders 列表如下所示&#xff1a;</p> 
<pre><code class="prism language-php"><span class="token punctuation">[</span> <span class="token string single-quoted-string">&#39;ConTent-Length&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;123456&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;content-LENGTH&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;123&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;content-type&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;text/plain&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;CONNECTION&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;keep-alive&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;Host&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;mysite.com&#39;</span><span class="token punctuation">,</span>
  <span class="token string single-quoted-string">&#39;accepT&#39;</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">&#39;*/*&#39;</span> <span class="token punctuation">]</span>
</code></pre> 
<h4><a id="http_145"></a>开启服务器&#xff08;启动一个http服务器&#xff09;</h4> 
<p>首先我们把项目放在phpstudy-&gt;www目录的新建node文件夹中&#xff0c;启动phpstudy&#xff0c;打开vs code 在终端运行0.1.js<br /> 0.1.js</p> 
<pre><code class="prism language-js"><span class="token comment">// 引入http核心模块</span>
<span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 创建一个服务</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res<span class="token punctuation">,</span>rs</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">// console.log(res.method);</span>
    rs<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&#39;nihao &#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    rs<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 启动监听</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请访问 127.0.0.1:8080&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> 
</code></pre> 
<p>效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191022110731126.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191022110101538.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 简单明了&#xff0c;不懂请移步中文手册&#xff0c;或者你需要来一波更详细的0.2.js<br /> 在终端crtl &#43; c 退出运行0.2.js</p> 
<pre><code class="prism language-js"><span class="token comment">// 1. 导入http模块</span>
<span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 2. 使用http这个模块中的createServer()创建一个服务器实例对象</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 3. 绑定端口号,启动web服务器</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39; 请访问http://localhost:8000&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 4. 为这个服务器实例对象注册 request 请求处理函数</span>
<span class="token comment">// 请求处理函数function(形参1,形参2){}</span>
<span class="token comment">// 形参1:request请求对象 获取到当前请求的路径,方法等本次请求的所有信息</span>
<span class="token comment">// 形参2:response响应对象 发送响应数据</span>
server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;服务端收到客户端的请求啦!!!&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 向客户端页面返回字符串</span>
    response<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&#34;hello node&#34;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 结束响应</span>
    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191022110924727.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191022110944958.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 把response.write(“hello node”);改为 response.write(“你好&#xff0c;世界&#xff01;”);<br /> 效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191022112431451.png" alt="在这里插入图片描述" /><br /> <strong>注意</strong>&#xff1a;因为我们的服务器接受请求处理并响应数据时&#xff0c;并没有指定响应数据的类型&#xff0c;所以可能会出现了乱码&#xff1b;为了安全起见&#xff0c;我们可以通过服务器的响应头指定数据类型&#xff0c;在 <a href="http://nodejs.cn/api/http.html#http_class_http_serverresponse">http.ServerResponse 类</a> 中为我们提供了setHeader 方法&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191022112347525.png" alt="在这里插入图片描述" /></p> 
<h3><a id="_HTML__197"></a>响应 HTML 页面</h3> 
<p>此前我们回顾一下原生ajax请求</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>en<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>viewport<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>width&#61;device-width, initial-scale&#61;1.0<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>X-UA-Compatible<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>ie&#61;edge<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>button<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>点击<span class="token punctuation">&#34;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>btn<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&#39;btn&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> xhr <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">&#61;&#61;</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token function">alert</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">&#39;get&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;./xx.php&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>实例&#xff1a;<br /> http.1.js</p> 
<pre><code class="prism language-php"><span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token operator">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token operator">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;request&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span>rso<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token operator">.</span>method <span class="token operator">&#61;&#61;</span> <span class="token string single-quoted-string">&#39;GET&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;GET请求&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token operator">.</span>method <span class="token operator">&#61;&#61;</span> <span class="token string single-quoted-string">&#39;POST&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;POST请求&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    rso<span class="token operator">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;Content-type&#39;</span><span class="token punctuation">,</span><span class="token string single-quoted-string">&#39;text/html;charset&#61;utf-8&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    rso<span class="token operator">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;&lt;h1&gt;你好&#xff0c;node.js&lt;/h1&gt;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token operator">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;请打开浏览器访问:127.0.0.1:8000&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191022120338739.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191022120350940.png" alt="在这里插入图片描述" /><br /> 然而&#xff0c;我们不能一直将html代码写到服务器的方法中&#xff0c;而是需要建一个xx.html的文件&#xff0c;将html文件中的内容返回给客户端&#xff1b;<br /> index .html</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>en<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>viewport<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>width&#61;device-width, initial-scale&#61;1.0<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>X-UA-Compatible<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>ie&#61;edge<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>你好&#xff0c;node<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>nodejs代码<br /> http.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1:引入文件操作模块</span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 2&#xff1a;读取html文件中的内容</span>
    fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span>html_data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 设置响应头</span>
        response<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&#39;Content-Type&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;text/html;charset&#61;utf-8&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 将html中的内容响应回客户端&#xff0c;结束响应</span>
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请打开浏览器访问:127.0.0.1:8000&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191022155851468.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191022155907636.png" alt="在这里插入图片描述" /></p> 
<h4><a id="cssjs_285"></a>响应图片、css、js等其他静态资源</h4> 
<p>index.html</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>en<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>viewport<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>width&#61;device-width, initial-scale&#61;1.0<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>X-UA-Compatible<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>ie&#61;edge<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>dfhdslkj<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>./img/1.jpg<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>nice<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>./index.js<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>http.3.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res<span class="token punctuation">,</span> rso</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> urls <span class="token operator">&#61;</span> res<span class="token punctuation">.</span>url<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>urls<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>urls <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        rso<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&#39;Content-type&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;text/html;charset&#61;utf-8&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            rso<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 响应一切HTML需要的静态资源</span>
        fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span><span class="token operator">&#43;</span>urls<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            rso<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span> 
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请打开浏览器访问:127.0.0.1:8000&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191022161349247.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191022161417875.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<h3><a id="_332"></a>服务器遍历文件及文件夹-案例</h3> 
<p>首先得有一下图片<br /> <img src="https://img-blog.csdnimg.cn/20191022163025550.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>尝试读一下文件目录</strong><br /> readlist.js</p> 
<pre><code class="prism language-php"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
fs<span class="token operator">.</span><span class="token function">readdir</span><span class="token punctuation">(</span><span class="token string single-quoted-string">&#39;./&#39;</span><span class="token punctuation">,</span><span class="token string single-quoted-string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span>data<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191022164926264.png" alt="在这里插入图片描述" /><br /> 获取的文件目录是数组&#xff0c;暂时区别不出文件与文件夹。<br /> 然后加载安装第三方时间处理模块</p> 
<pre><code class="prism language-php">npm install moment
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191022172043959.png" alt="在这里插入图片描述" /><br /> <strong>获取文件在前台遍历</strong><br /> 因为要格式化时间需要用到第三方时间模块</p> 
<pre><code class="prism language-php">npm install moment
</code></pre> 
<p>第一次安装有点慢<br /> <img src="https://img-blog.csdnimg.cn/20191023142547767.png" alt="在这里插入图片描述" /><br /> 安装成功<br /> <img src="https://img-blog.csdnimg.cn/20191023142824869.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 会多了node_modules文件夹&#xff0c;以后安装node模块都放在这里<br /> <img src="https://img-blog.csdnimg.cn/20191023142908655.png" alt="在这里插入图片描述" /><br /> 还多了一个package-lock.json文件&#xff0c;这是存放你安装的node模块的配置信息&#xff0c;有大用处<br /> <img src="https://img-blog.csdnimg.cn/20191023143117410.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 然后准备完成&#xff0c;来看具体代码&#xff1a;<br /> 使用node载入静态页面&#xff1a;<br /> index.html</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">&#34;-//W3C//DTD HTML 3.2 Final//EN&#34;</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- saved from url&#61;(0017)http://localhost/ --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>Content-Type<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>text/html; charset&#61;UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Index of /<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Index of /<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">valign</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>top<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>./img/blank.gif<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>[ICO]<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>http://localhost/?C&#61;N;O&#61;D<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>http://localhost/?C&#61;M;O&#61;A<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>Last modified<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>http://localhost/?C&#61;S;O&#61;A<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>Size<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>http://localhost/?C&#61;D;O&#61;A<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>Description<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- &lt;tr&gt;
        &lt;td valign&#61;&#34;top&#34;&gt;&lt;img src&#61;&#34;./img/folder.gif&#34; alt&#61;&#34;[DIR]&#34;&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href&#61;&#34;&#34;&gt;201805/&lt;/a&gt; &lt;/td&gt;
        &lt;td align&#61;&#34;right&#34;&gt;2018-06-21 17:13 &lt;/td&gt;
        &lt;td align&#61;&#34;right&#34;&gt; - &lt;/td&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt; --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>address</span><span class="token punctuation">&gt;</span></span>Apache/2.4.33 (Win32) OpenSSL/1.1.0g PHP/7.2.4 Server at localhost Port 80<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>address</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">var</span> xhr <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">&#61;&#61;</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token comment">// console.log(xhr.responseText);</span>
      <span class="token keyword">var</span> data <span class="token operator">&#61;</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// console.log(data);</span>
      <span class="token keyword">var</span> htmls <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">&#43;&#43;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
          htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;tr&gt;&#39;</span><span class="token punctuation">;</span>
          <span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;f&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;td valign&#61;&#34;top&#34;&gt;&lt;img src&#61;&#34;./img/text.gif&#34; alt&#61;&#34;[DIR]&#34;&gt;&lt;/td&gt;&#39;</span>
          <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;td valign&#61;&#34;top&#34;&gt;&lt;img src&#61;&#34;./img/folder.gif&#34; alt&#61;&#34;[DIR]&#34;&gt;&lt;/td&gt;&#39;</span>
          <span class="token punctuation">}</span>
          
          htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;td&gt;&lt;a href&#61;&#34;&#34;&gt;&#39;</span> <span class="token operator">&#43;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">&#43;</span> <span class="token string">&#39;/&lt;/a&gt; &lt;/td&gt;&#39;</span>
          htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;td align&#61;&#34;right&#34;&gt;&#39;</span><span class="token operator">&#43;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>mtime <span class="token operator">&#43;</span><span class="token string">&#39; &lt;/td&gt;&#39;</span>
          htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;td align&#61;&#34;right&#34;&gt; &#39;</span><span class="token operator">&#43;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>size <span class="token operator">&#43;</span> <span class="token string">&#39; &lt;/td&gt;&#39;</span>
          htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&#39;</span>
          htmls <span class="token operator">&#43;&#61;</span> <span class="token string">&#39;&lt;/tr&gt;&#39;</span>
      <span class="token punctuation">}</span>
      document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&#39;tbody&#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML <span class="token operator">&#43;&#61;</span> htmls<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">&#39;get&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;./file_list&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>http.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> moment <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;moment&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span>response</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;./file_list&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        fs<span class="token punctuation">.</span><span class="token function">readdir</span><span class="token punctuation">(</span><span class="token string">&#39;./&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token comment">// 我们想要拿到文件的其他属性必须在读取文件之后获取</span>
            <span class="token comment">// 就是需要我们把获取文件属性的代码写到回调函数里面</span>
            <span class="token keyword">var</span> data_arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token comment">// 循环获取每个文件的其他属性</span>
            <span class="token keyword">var</span> cont <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>
            <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">&#61;</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">&#43;&#43;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">;</span>
                <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                    fs<span class="token punctuation">.</span><span class="token function">stat</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>files</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                        <span class="token comment">// 因为获取文件属性的代码必须在回调函数中</span>
                        <span class="token comment">// 所有造成了循环中的I丢失</span>
                        <span class="token comment">// console.log(files.size);</span>
                        cont<span class="token operator">&#43;&#43;</span><span class="token punctuation">;</span>
                        <span class="token keyword">if</span><span class="token punctuation">(</span>files<span class="token punctuation">.</span><span class="token function">isFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                            data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;f&#39;</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
                            data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;d&#39;</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">&#61;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
                        data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>size <span class="token operator">&#61;</span> files<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
                        data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>mtime <span class="token operator">&#61;</span> <span class="token function">moment</span><span class="token punctuation">(</span>files<span class="token punctuation">.</span>mtime<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">&#39;YYYY-MM-DD hh:mm:ss&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token comment">// console.log(data[i]);</span>
                        <span class="token keyword">if</span><span class="token punctuation">(</span>cont <span class="token operator">&#61;&#61;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data_arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token comment">// 因此我们借助自调用匿名函数形成闭包,保存I变量</span>
                <span class="token comment">// 回调函数中就可以使用i变量</span>
                
                <span class="token comment">// data_arr.push(obj);</span>
            <span class="token punctuation">}</span>
            <span class="token comment">// 因为文件的属性都是在回调函数中获取,所以在回调函数外部不能组装数据</span>
            <span class="token comment">// 循环结束后数据内容依然为空, 因为我们的回调函数在循环结束后才会运行</span>
            <span class="token comment">// console.log(data_arr);</span>
            <span class="token comment">// response.end(JSON.stringify(data));</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
        fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span><span class="token operator">&#43;</span>request<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
   
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请打开浏览器访问:127.0.0.1:8000&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>终端运行node http.js就会出现类似这种效果&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191023143748385.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 模仿Apache服务器&#xff0c;遍历文件及文件&#xff0c;显示时间及大小完毕</p> 
<h3><a id="_i__491"></a>循环后 i 丢失的问题</h3> 
<p>http.js</p> 
<pre><code class="prism language-js"><span class="token comment">// var arr &#61; [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];</span>
<span class="token comment">// for (var i &#61; 0; i &lt; arr.length; i&#43;&#43;) {<!-- --></span>
<span class="token comment">//     // 模拟延迟</span>
<span class="token comment">//     setTimeout(function () {<!-- --></span>
<span class="token comment">//         console.log(arr[i]);</span>
<span class="token comment">//     }, 1000);</span>
<span class="token comment">// }</span>
<span class="token comment">/*
 * *******************************************
 * 上面的代码 全部输出 undefined
 * *******************************************
 */</span> 
<span class="token keyword">var</span> arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;b&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;c&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&#43;&#43;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 模拟延迟</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023145037506.png" alt="在这里插入图片描述" /></p> 
<h2><a id="npm_517"></a>包管理器npm</h2> 
<h3><a id="moment_518"></a>使用moment</h3> 
<p>使用第三方包格式化时间&#xff0c;如上安装后即可使用<br /> <img src="https://img-blog.csdnimg.cn/20191023145256547.png" alt="在这里插入图片描述" /><br /> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0x0BSVC5-1571667161261)(.\img\Snipaste_2018-09-26_13-43-05.png)]<br /> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GYKAVD5A-1571667161262)(./img\Snipaste_2018-09-26_13-44-02.png)]</p> 
<h3><a id="npm__523"></a>npm 命令的使用</h3> 
<p>上面的代码&#xff0c;我们使用npm安装了moment来进行格式化时间的处理&#xff0c;这就是使用第三方模块&#xff1b;<br /> <img src="https://img-blog.csdnimg.cn/20191023145428697.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 而我们使用的npm就是node中自带的包(模块)管理工具&#xff1b;<br /> 借助NPM可以帮助我们快速安装和管理依赖包&#xff0c;使Node与第三方模块之间形成了一个良好的生态系统&#xff1b;<br /> <strong>查看版本号</strong></p> 
<pre><code class="prism language-php">npm <span class="token operator">-</span>v
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023145639723.png" alt="在这里插入图片描述" /><br /> <strong>查看帮助引导</strong><br /> <img src="https://img-blog.csdnimg.cn/20191023145759714.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<h3><a id="npm_535"></a>使用npm初始化项目</h3> 
<p>npm对node.js来说及其重要&#xff0c;就像枪手的枪。<br /> 而且一个项目&#xff0c;不可能只是使用一个第三方包&#xff0c;而包越多&#xff0c;管理起来就越麻烦&#xff0c;<br /> 而 npm init 给我们提供了项目初始化的功能&#xff0c;也解决了多个包的管理问题&#xff1a;<br /> <strong>初始化项目</strong></p> 
<pre><code class="prism language-php">npm init
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023150430229.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>初始化时要配置你的项目信息&#xff0c;大概依次是如项目名&#xff0c;版本号&#xff0c;描述信息&#xff0c;入口文件&#xff0c;设置的一些指令&#xff0c;git仓库地址&#xff0c;关键字&#xff0c; 作者&#xff0c;&#xff0c;当前项目的协议等&#xff0c;不填可回车跳过&#xff0c;最后y回车确认保存配置项目信息&#xff0c;会多出一个package.json文件</strong><br /> <img src="https://img-blog.csdnimg.cn/20191023151718835.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<h3><a id="_npm__546"></a>解决 npm 被墙问题</h3> 
<p>npm 存储包文件的服务器在国外&#xff0c;有时候会被墙&#xff0c;速度很慢&#xff0c;所以我们需要解决这个问题。<br /> 淘宝的开发团队把 npm 在国内做了一个备份&#xff1a;<a href="http://npm.taobao.org/">淘宝的 cnpm</a><br /> 安装淘宝的 cnpm&#xff1a;</p> 
<pre><code class="prism language-shell"><span class="token comment"># 在任意目录执行都可以</span>
<span class="token comment"># --global 表示安装到全局&#xff0c;而非当前目录</span>
<span class="token comment"># --global 不能省略&#xff0c;否则不管用</span>
<span class="token function">npm</span> <span class="token function">install</span> --global cnpm
</code></pre> 
<p>接下来你安装包的时候把之前的 <code>npm</code> 替换成 <code>cnpm</code>。<br /> 举个例子&#xff1a;</p> 
<pre><code class="prism language-shell"><span class="token comment"># 这里还是走国外的 npm 服务器&#xff0c;速度比较慢</span>
<span class="token function">npm</span> <span class="token function">install</span> jquery
<span class="token comment"># 使用 cnpm 就会通过淘宝的服务器来下载 jquery</span>
cnpm <span class="token function">install</span> jquery
</code></pre> 
<p>如果不想安装 <code>cnpm</code> 又想使用淘宝的服务器来下载&#xff1a;</p> 
<pre><code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> jquery --registry<span class="token operator">&#61;</span>https://registry.npm.taobao.org
</code></pre> 
<p>但是每一次手动这样加参数很麻烦&#xff0c;所我们可以把这个选项加入配置文件中&#xff1a;</p> 
<pre><code class="prism language-shell"><span class="token comment"># 配置到淘宝服务器</span>
<span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org
<span class="token comment"># 查看 npm 配置信息</span>
<span class="token function">npm</span> config list
</code></pre> 
<p>只要经过了上面命令的配置&#xff0c;则你以后所有的 <code>npm install</code> 都会默认通过淘宝的服务器来下载。</p> 
<h3><a id="packagejson__packagelockjson__576"></a>package.json 与 package-lock.json 文件</h3> 
<p>如果后期开发过程中&#xff0c;需要项目迁移&#xff0c;我们只需要将<strong>package.json</strong>文件迁移即可&#xff0c;在新项目下执行<br /> <code>npm install </code> &#xff0c;所有第三方包会自动安装&#xff1b;<br /> <img src="https://img-blog.csdnimg.cn/2019102315381643.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>package.json的作用</strong>就是用来<strong>记录当前项目及包的使用情况&#xff1b;<code>不能在package.json中添加注释</code></strong><br /> <strong>package-lock.json</strong> <strong>保存第三方包的版本和下载路径等详细信息&#xff1b;</strong><br /> <strong>当我们使用npm管理包时&#xff0c;package.json 及package-lock.json 的内容都会自动更新</strong></p> 
<h3><a id="_583"></a>服务端页面渲染</h3> 
<p>之前的案例中&#xff0c;我们时通过前端浏览器发送ajax请求获取服务器数据的&#xff0c;前端获取数据后进行遍历展示&#xff1b;<br /> <img src="https://img-blog.csdnimg.cn/20191023153944853.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="" /><br /> 缺点就是发送多次请求、不利于搜索引擎查找&#xff1b;我们修改改为后端渲染数据&#xff1b;<br /> <strong>art-template</strong>&#xff1a; <a href="https://www.npmjs.com/package/art-template">https://www.npmjs.com/package/art-template</a><br /> 查看中文文档<br /> <img src="https://img-blog.csdnimg.cn/20191023160756902.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>使用art-termplate模板引擎模块&#xff1a;</strong><br /> art.html</p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>{<!-- -->{va}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>art.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> template <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;art-template&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
template<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>root <span class="token operator">&#61;</span> <span class="token string">&#39;./&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str<span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./art.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">va</span><span class="token operator">:</span><span class="token string">&#39;李四&#39;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191023160634807.png" alt="在这里插入图片描述" /><br /> 循环语法<br /> <img src="https://img-blog.csdnimg.cn/2019102316092962.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>加快速度模块化实现用服务端渲染文件</strong></p> 
<h3><a id="NodeCommonJS_609"></a>模块化封装案例&#xff08;不懂部分稍后看下面Node模块化及CommonJS规范&#xff09;</h3> 
<p>新建立个apache2文件夹&#xff0c;它用以下文件<br /> package.json</p> 
<pre><code class="prism language-shell"><span class="token punctuation">{<!-- --></span>
  <span class="token string">&#34;name&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;apache_com&#34;</span>,
  <span class="token string">&#34;version&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;1.0.0&#34;</span>,
  <span class="token string">&#34;description&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;&#34;</span>,
  <span class="token string">&#34;main&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;http.js&#34;</span>,
  <span class="token string">&#34;scripts&#34;</span><span class="token builtin class-name">:</span> <span class="token punctuation">{<!-- --></span>
    <span class="token string">&#34;test&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;echo <span class="token entity" title="\&#34;">\&#34;</span>Error: no test specified<span class="token entity" title="\&#34;">\&#34;</span> &amp;&amp; exit 1&#34;</span>
  <span class="token punctuation">}</span>,
  <span class="token string">&#34;author&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;&#34;</span>,
  <span class="token string">&#34;license&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;ISC&#34;</span>,
  <span class="token string">&#34;dependencies&#34;</span><span class="token builtin class-name">:</span> <span class="token punctuation">{<!-- --></span>
    <span class="token string">&#34;art-template&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;^4.13.1&#34;</span>,
    <span class="token string">&#34;moment&#34;</span><span class="token builtin class-name">:</span> <span class="token string">&#34;^2.22.2&#34;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre> 
<p>http.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> luyou <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./luyou&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

luyou<span class="token punctuation">.</span><span class="token function">server</span><span class="token punctuation">(</span>server<span class="token punctuation">)</span><span class="token punctuation">;</span>

server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请打开浏览器访问:127.0.0.1:8000&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre> 
<p>添加自定义模块 luyou.js – 路由模块<br /> luyou.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">server</span><span class="token punctuation">(</span><span class="token parameter">server</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>request<span class="token punctuation">.</span>url <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>

            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>yewu<span class="token punctuation">.</span>htmls<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>request<span class="token punctuation">.</span>url <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/file_list&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            fs<span class="token punctuation">.</span><span class="token function">readdir</span><span class="token punctuation">(</span><span class="token string">&#39;./&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                <span class="token keyword">var</span> data_arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                <span class="token keyword">var</span> cont <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>
                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">&#43;&#43;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">;</span>

                    <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                        fs<span class="token punctuation">.</span><span class="token function">stat</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> files</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>

                            cont<span class="token operator">&#43;&#43;</span><span class="token punctuation">;</span>
                            <span class="token keyword">if</span> <span class="token punctuation">(</span>files<span class="token punctuation">.</span><span class="token function">isFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                                data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;f&#39;</span><span class="token punctuation">;</span>
                            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                                data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;d&#39;</span><span class="token punctuation">;</span>
                            <span class="token punctuation">}</span>

                            data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">&#61;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
                            data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>size <span class="token operator">&#61;</span> files<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
                            data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>mtime <span class="token operator">&#61;</span> <span class="token function">moment</span><span class="token punctuation">(</span>files<span class="token punctuation">.</span>mtime<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">&#39;YYYY-MM-DD hh:mm:ss&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                            <span class="token comment">// console.log(data[i]);</span>
                            <span class="token keyword">if</span> <span class="token punctuation">(</span>cont <span class="token operator">&#61;&#61;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                                response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data_arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                            <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span><span class="token punctuation">)</span>

                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token comment">// 因此我们借助自调用匿名函数形成闭包,保存I变量</span>
                    <span class="token comment">// 回调函数中就可以使用i变量</span>

                    <span class="token comment">// data_arr.push(obj);</span>
                <span class="token punctuation">}</span>

            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
            fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> request<span class="token punctuation">.</span>url<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>


module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>server <span class="token operator">&#61;</span> server<span class="token punctuation">;</span>
</code></pre> 
<p>contrllor.js — 业务模块<br /> yewu.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> moment <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;moment&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> template <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;art-template&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

template<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>root <span class="token operator">&#61;</span> <span class="token string">&#39;./&#39;</span>

fs<span class="token punctuation">.</span><span class="token function">readdir</span><span class="token punctuation">(</span><span class="token string">&#39;./&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> data_arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token comment">// 循环获取每个文件的其他属性</span>
    <span class="token keyword">var</span> cont <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">&#43;&#43;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">;</span>

        <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            fs<span class="token punctuation">.</span><span class="token function">stat</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> files</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>

                cont<span class="token operator">&#43;&#43;</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>files<span class="token punctuation">.</span><span class="token function">isFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;f&#39;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                    data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;d&#39;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

                data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">&#61;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
                data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>size <span class="token operator">&#61;</span> files<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
                data_arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>mtime <span class="token operator">&#61;</span> <span class="token function">moment</span><span class="token punctuation">(</span>files<span class="token punctuation">.</span>mtime<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">&#39;YYYY-MM-DD hh:mm:ss&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token comment">// console.log(data[i]);</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>cont <span class="token operator">&#61;&#61;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>

                    <span class="token keyword">var</span> htmls <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> data_arr <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                    exports<span class="token punctuation">.</span>htmls <span class="token operator">&#61;</span> htmls<span class="token punctuation">;</span>

                    <span class="token comment">// response.end(htmls);</span>

                    <span class="token comment">// response.end(JSON.stringify(data_arr));</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>

        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>视图模板<br /> index.html</p> 
<pre><code class="prism language-php"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html <span class="token keyword">PUBLIC</span> <span class="token string double-quoted-string">&#34;-//W3C//DTD HTML 3.2 Final//EN&#34;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> saved from url<span class="token operator">&#61;</span><span class="token punctuation">(</span><span class="token number">0017</span><span class="token punctuation">)</span>http<span class="token punctuation">:</span><span class="token comment">//localhost/ --&gt;</span>
<span class="token operator">&lt;</span>html<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>meta http<span class="token operator">-</span>equiv<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;Content-Type&#34;</span> content<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;text/html; charset&#61;UTF-8&#34;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>Index of <span class="token operator">/</span><span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>Index of <span class="token operator">/</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>table<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>tbody<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>tr<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>th valign<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;top&#34;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>img src<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;./img/blank.gif&#34;</span> alt<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;[ICO]&#34;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a href<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;http://localhost/?C&#61;N;O&#61;D&#34;</span><span class="token operator">&gt;</span>Name<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a href<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;http://localhost/?C&#61;M;O&#61;A&#34;</span><span class="token operator">&gt;</span>Last modified<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a href<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;http://localhost/?C&#61;S;O&#61;A&#34;</span><span class="token operator">&gt;</span>Size<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a href<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;http://localhost/?C&#61;D;O&#61;A&#34;</span><span class="token operator">&gt;</span>Description<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>

      <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>each data<span class="token punctuation">}</span><span class="token punctuation">}</span>
      <span class="token operator">&lt;</span>tr<span class="token operator">&gt;</span>
        <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token keyword">if</span> <span class="token variable">$value</span><span class="token operator">.</span>type <span class="token operator">&#61;&#61;</span> <span class="token string single-quoted-string">&#39;f&#39;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
        <span class="token operator">&lt;</span>td valign<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;top&#34;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>img src<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;./img/text.gif&#34;</span> alt<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;[DIR]&#34;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
        <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token keyword">else</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
        <span class="token operator">&lt;</span>td valign<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;top&#34;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>img src<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;./img/folder.gif&#34;</span> alt<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;[DIR]&#34;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
        <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token operator">/</span><span class="token keyword">if</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
        <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a href<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;&#34;</span><span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token variable">$value</span><span class="token operator">.</span>name<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span> <span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>td align<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;right&#34;</span><span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token variable">$value</span><span class="token operator">.</span>mtime<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>td align<span class="token operator">&#61;</span><span class="token string double-quoted-string">&#34;right&#34;</span><span class="token operator">&gt;</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token variable">$value</span><span class="token operator">.</span>size<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span><span class="token operator">&amp;</span>nbsp<span class="token punctuation">;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>
      <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token operator">/</span>each<span class="token punctuation">}</span><span class="token punctuation">}</span>


    <span class="token operator">&lt;</span><span class="token operator">/</span>tbody<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>table<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>address<span class="token operator">&gt;</span>Apache<span class="token operator">/</span><span class="token number">2.4</span><span class="token number">.33</span> <span class="token punctuation">(</span>Win32<span class="token punctuation">)</span> OpenSSL<span class="token operator">/</span><span class="token number">1.1</span><span class="token number">.0</span>g <span class="token constant">PHP</span><span class="token operator">/</span><span class="token number">7.2</span><span class="token number">.4</span> Server at localhost Port <span class="token number">80</span><span class="token operator">&lt;</span><span class="token operator">/</span>address<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
  <span class="token comment">// var xhr &#61; new XMLHttpRequest();</span>
  <span class="token comment">// xhr.onreadystatechange &#61; function () {<!-- --></span>
  <span class="token comment">//   if (xhr.readyState &#61;&#61; 4) {<!-- --></span>
  <span class="token comment">//     // console.log(xhr.responseText);</span>
  <span class="token comment">//     var data &#61; JSON.parse(xhr.responseText);</span>
  <span class="token comment">//     // console.log(data);</span>
  <span class="token comment">//     var htmls &#61; &#39;&#39;;</span>
  <span class="token comment">//     for (var i &#61; 0; i &lt; data.length; i&#43;&#43;) {<!-- --></span>
  <span class="token comment">//         htmls &#43;&#61; &#39;&lt;tr&gt;&#39;;</span>
  <span class="token comment">//         if(data[i].type &#61;&#61; &#39;f&#39;){<!-- --></span>
  <span class="token comment">//           htmls &#43;&#61; &#39;&lt;td valign&#61;&#34;top&#34;&gt;&lt;img src&#61;&#34;./img/text.gif&#34; alt&#61;&#34;[DIR]&#34;&gt;&lt;/td&gt;&#39;</span>
  <span class="token comment">//         }else{<!-- --></span>
  <span class="token comment">//           htmls &#43;&#61; &#39;&lt;td valign&#61;&#34;top&#34;&gt;&lt;img src&#61;&#34;./img/folder.gif&#34; alt&#61;&#34;[DIR]&#34;&gt;&lt;/td&gt;&#39;</span>
  <span class="token comment">//         }</span>

  <span class="token comment">//         htmls &#43;&#61; &#39;&lt;td&gt;&lt;a href&#61;&#34;&#34;&gt;&#39; &#43; data[i].name &#43; &#39;/&lt;/a&gt; &lt;/td&gt;&#39;</span>
  <span class="token comment">//         htmls &#43;&#61; &#39;&lt;td align&#61;&#34;right&#34;&gt;&#39;&#43; data[i].mtime &#43;&#39; &lt;/td&gt;&#39;</span>
  <span class="token comment">//         htmls &#43;&#61; &#39;&lt;td align&#61;&#34;right&#34;&gt; &#39;&#43; data[i].size &#43; &#39; &lt;/td&gt;&#39;</span>
  <span class="token comment">//         htmls &#43;&#61; &#39;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&#39;</span>
  <span class="token comment">//         htmls &#43;&#61; &#39;&lt;/tr&gt;&#39;</span>
  <span class="token comment">//     }</span>
  <span class="token comment">//     document.getElementsByTagName(&#39;tbody&#39;)[0].innerHTML &#43;&#61; htmls;</span>
  <span class="token comment">//   }</span>
  <span class="token comment">// }</span>

  <span class="token comment">// xhr.open(&#39;get&#39;, &#39;./file_list&#39;);</span>
  <span class="token comment">// xhr.send();</span>


  <span class="token comment">// console.log(s);</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre> 
<p>img文件夹<br /> <img src="https://img-blog.csdnimg.cn/20191023161916621.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>然后安装第三方包</strong></p> 
<pre><code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023162349754.png" alt="在这里插入图片描述" /><br /> 终端运行http.js文件<br /> <img src="https://img-blog.csdnimg.cn/20191023162725198.png" alt="在这里插入图片描述" /><br /> 效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191023162754977.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<p><strong>小结</strong>&#xff0c;那么我们在项目中应该使用 客户端渲染还是服务端渲染&#xff1a;<br /> 答&#xff1a;两者都用&#xff0c;根据数据的不同作用而定&#xff1b;</p> 
<blockquote> 
 <p>推举一个node开发时使用的小工具 nodemon<br /> 为什么用nodemon?<br /> 搭&#xff1a;修改代码后&#xff0c;需要重新启动 Express 应用&#xff0c;所做的修改才能生效。若之后的每次代码修改都要重复这样的操作&#xff0c;势必会影响开发效率&#xff0c;本文将详细介绍Nodemon&#xff0c;它会监测项目中的所有文件&#xff0c;一旦发现文件有改动&#xff0c;Nodemon 会自动重启应用</p> 
 <p>npm install nodemon -g</p> 
 <p>安装成功后,使用 nodemon 运行代码,</p> 
 <p>代码一旦被保存,nodemon便会自动重新运行新代码</p> 
</blockquote> 
<h2><a id="NodeCommonJS_855"></a>Node模块化及CommonJS规范</h2> 
<p>通过前面的学习, 我们基本掌握了NodeJS编程的基础知识, 但是我们也直观的发现了一个问题,和我们之前学习浏览器编程时JS, 差异还是很大的; 都是JavaScript编程, 为何有这种差异? 前面写过的防Apache服务器的案例中, 使用过内置fs模块, 使用过 moment 模块, 而这些模块都不是我们写的, 都是直接拿过来使用, 那么我们能不能自己写一个模块, 应该怎么写, 有哪些规矩, 如果我们自己写了一个模块, 能不能提供给其他编程人员直接使用, 应该怎么用?<br /> <img src="https://img-blog.csdnimg.cn/20191023163300448.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<blockquote> 
 <p>Electron 跨平台的桌面应用框架: <a href="https://electronjs.org/">https://electronjs.org/</a></p> 
</blockquote> 
<h3><a id="CommonJS_860"></a>CommonJS规范的由来</h3> 
<p>JS 的表现的表现能力取决于宿主环境提供的API, 在web1.0 时代, W3C 组织提供了浏览器的规范支持, 在web2.0 时代, 随着HTML5的发展, 更多的标准API 出现在了浏览器中, 但是, 在后端 JS 中标准的制定纹丝不动 ;<br /> 由 Mozilla 工程师Kevin Dangoor于2009年1月提出名为 <strong>ServerJS</strong> 的规范; 2009年8月&#xff0c;更名为*CommonJS&#xff0c;*以显示 API 的更广泛适用性。</p> 
<blockquote> 
 <p>What I’m describing here is not a technical problem. It’s a matter of people getting together and making a decision to step forward and start building up something bigger and cooler together.</p> 
 <p>我在这里描述的不是一个技术问题。这是一个人们聚在一起&#xff0c;决定向前一步&#xff0c;开始一起建立更大更酷的东西的问题。</p> 
 <p>–Kevin Dangoor<br /> <img src="https://img-blog.csdnimg.cn/20191023163403369.png" alt="在这里插入图片描述" /></p> 
</blockquote> 
<h3><a id="CommonJS__869"></a>CommonJS 的模块规范</h3> 
<p>CommonJS对模块的定义十分简单&#xff0c;主要分为&#xff1a;<br /> 1、模块引用&#xff1a;<br /> 使用 <code>require()</code> 方法引入一个模块API &#xff1b;<br /> 2、模块定义&#xff1a;<br /> 在模块中使用 exports 对象导出当前模块数据或方法&#xff1b;<br /> 在模块中还存在一个module对象&#xff0c;它代表模块自身&#xff0c;module对象有一个exports 属性&#xff0c;用于数据导出&#xff1b;<br /> 其实exports 对象就是module.exports 的引用; <code>exports &#61;&#61;&#61; module.exports</code><br /> 3、模块标识&#xff1a;<br /> 其实就是模块的文件名&#xff0c;必须符合小驼峰法命名规则&#xff0c;使用<code>require()</code> 引入时使用 <code>. 或 ..</code> 开头的相对路径或绝对路径&#xff0c;引入时可以不写文件后缀名&#xff1b;<br /> <strong>重点注意</strong> &#xff1a; 模块中的方法和变量的作用于尽在模块内部&#xff0c;每个模块具有独立的空间&#xff0c;互不干扰&#xff1b;<br /> CommonJS 构建的模块机制中的引入与导出是我们完全不用考虑变量污染或者替换的问题&#xff0c;相比与<code>命名空间</code>的机制&#xff0c;简直就是天才和菜鸟的区别&#xff1b;<br /> 说了这么多&#xff0c;让我们走一波CommonJS相关代码&#xff0c;了解他的具体使用方法<br /> 首先建一个commonjs文件夹&#xff0c;在这里编写以下代码&#xff1a;<br /> a.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> f <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./b.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">&#61;</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> d <span class="token operator">&#61;</span> a<span class="token operator">&#43;</span>b<span class="token operator">&#43;</span>f<span class="token punctuation">.</span>data<span class="token punctuation">;</span>

<span class="token comment">// exports &#61; module.exports;</span>

exports<span class="token punctuation">.</span>data <span class="token operator">&#61;</span> d<span class="token punctuation">;</span>
</code></pre> 
<p>b.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token number">4</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>data <span class="token operator">&#61;</span> a<span class="token punctuation">;</span>
</code></pre> 
<p>f.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./a&#39;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
</code></pre> 
<p>终端运行f.js文件效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191023164141404.png" alt="在这里插入图片描述" /><br /> 显然三个文件使用两次commonjs调用&#xff0c;但原理看起来如此简单<br /> 这便是&#xff1a;<strong>Node对CommonJS的实现 (Node模块化)</strong><br /> <img src="https://img-blog.csdnimg.cn/20191023165110329.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 以上代码就是<strong>自定义模块</strong>的基本规则 这是<strong>重点</strong><br /> 再用一个例子加深印象<br /> com,js</p> 
<pre><code class="prism language-js"><span class="token comment">// module.exports &#61; {name:123};</span>

<span class="token comment">// exports.data &#61; {};</span>

<span class="token comment">// 1、module.exports 可以直接赋值,值就会被导出&#xff08;推荐使用&#xff09;</span>

<span class="token comment">// 2、但是exports直接赋值,不能导出; 必须使用exportsd.xx</span>

<span class="token comment">// module.exports &#61; function(){<!-- --></span>
<span class="token comment">//     return 123;</span>
<span class="token comment">// }</span>

module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;lisi&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">fun</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">123456</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
<p>co.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> s <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./com&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// var d &#61; s(); // 错误写法&#xff0c;s是一个对象</span>
<span class="token comment">// console.log(typeof  s); // object</span>
</code></pre> 
<p>效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191023170040177.png" alt="在这里插入图片描述" /></p> 
<h3><a id="_947"></a>模块加载的顺序和规则</h3> 
<p>在 CommonJS 规范中&#xff0c;使用 <code>require()</code> 加载(引入) 模块时&#xff0c;模块标识必须使用相对路径或绝对路径指明模块位置&#xff0c;但是在node的实现中&#xff0c;我们可以不指明模块路径&#xff1b;如&#xff1a; <code>require(&#39;fs&#39;)、require(&#39;moment&#39;)</code> ;<br /> 如果没有指明路径&#xff0c;那就是加载核心模块或第三方模块&#xff0c;指明加载路径一般就是加载自定义模块&#xff1b;<br /> 不管加载什么模块&#xff0c;都是优先从缓存中加载&#xff1a;</p> 
<blockquote> 
 <p>Node 加载模块时&#xff0c;如果这个模块已经被加载过了&#xff0c;则会直接缓存起来&#xff0c;将来再次引用时不会再次加加载这个模块&#xff08;即&#xff1a;如果一个模块被加载两次&#xff0c;则模块中的代码只会被执行一次&#xff09;<br /> 而核心模块和第三方模块的的加载顺序就是&#xff1a;<br /> 先加载核心模块&#xff0c;核心模块的内容都是在安装node时已经编译好的可执行的二进制代码&#xff0c;加载执行的速度&#xff0c;仅次于缓存加载&#xff0c;如果核心模块中没有&#xff0c;则加载第三方模块<br /> 第三方模块的加载规则&#xff1a;</p> 
 <ul><li>先在当前文件的模块所属目录去找 node_modules目录</li><li>如果找到&#xff0c;则去该目录中找 模块名的目录 如 : moment</li><li>如果找到 moment 目录&#xff0c; 则找该目录中的 package.json文件</li><li>如果找到 package.json 文件&#xff0c;则找该文件中的 main属性</li><li>如果找到main 属性&#xff0c;则拿到该属性对应的文件</li><li>如果找到 moment 目录之后&#xff0c; 
   <ul><li>没有package.json</li><li>或者有 package.json 没有 main 属性</li><li>或者有 main 属性&#xff0c;但是指向的路径不存在</li><li>则 node 会默认去看一下 moment 目录中有没有 index.js --&gt; index.json–&gt; index.node 文件</li></ul> </li><li>如果找不到index 或者 找不到 moment 或者找不到 node_modules</li><li>则进入上一级目录找 node_moudles 查找&#xff08;规则同上&#xff09;</li><li>如果上一级还找不到&#xff0c;继续向上&#xff0c;一直到当前文件所属磁盘的根目录</li><li>如果到磁盘概目录还没有找到&#xff0c;直接报错</li></ul> 
</blockquote> 
<h2><a id="_970"></a>海贼王用户管理系统–项目</h2> 
<h3><a id="MySQL_971"></a>连接MySQL数据库</h3> 
<p><a href="https://www.npmjs.com/package/mysql">https://www.npmjs.com/package/mysql</a></p> 
<h4><a id="mysqlCURD_973"></a>mysql基本CURD</h4> 
<pre><code class="prism language-sql"><span class="token keyword">SELECT</span> <span class="token identifier"><span class="token punctuation">&#96;</span>id<span class="token punctuation">&#96;</span></span><span class="token punctuation">,</span> <span class="token identifier"><span class="token punctuation">&#96;</span>name<span class="token punctuation">&#96;</span></span> <span class="token keyword">FROM</span> <span class="token identifier"><span class="token punctuation">&#96;</span>users<span class="token punctuation">&#96;</span></span> <span class="token keyword">WHERE</span> <span class="token number">1</span> 
<span class="token keyword">INSERT</span> <span class="token keyword">INTO</span> <span class="token identifier"><span class="token punctuation">&#96;</span>users<span class="token punctuation">&#96;</span></span><span class="token punctuation">(</span><span class="token identifier"><span class="token punctuation">&#96;</span>id<span class="token punctuation">&#96;</span></span><span class="token punctuation">,</span> <span class="token identifier"><span class="token punctuation">&#96;</span>name<span class="token punctuation">&#96;</span></span><span class="token punctuation">)</span> <span class="token keyword">VALUES</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token keyword">value</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token keyword">value</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token keyword">UPDATE</span> <span class="token identifier"><span class="token punctuation">&#96;</span>users<span class="token punctuation">&#96;</span></span> <span class="token keyword">SET</span> <span class="token identifier"><span class="token punctuation">&#96;</span>name<span class="token punctuation">&#96;</span></span><span class="token operator">&#61;</span><span class="token string">&#39;value&#39;</span> <span class="token keyword">WHERE</span> id<span class="token operator">&#61;</span><span class="token number">1</span>
<span class="token keyword">DELETE</span> <span class="token keyword">FROM</span> <span class="token identifier"><span class="token punctuation">&#96;</span>users<span class="token punctuation">&#96;</span></span> <span class="token keyword">WHERE</span> id<span class="token operator">&#61;</span><span class="token keyword">value</span>
</code></pre> 
<h4><a id="MySQL_980"></a>安装连接MySQL</h4> 
<p>新建haizei_test文件夹<br /> 运行安装mysql第三方包</p> 
<pre><code class="prism language-php">npm install mysql
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023172700918.png" alt="在这里插入图片描述" /><br /> 建&#xff08;node&#xff09;库建&#xff08;users&#xff09;表<br /> <img src="https://img-blog.csdnimg.cn/20191023183426438.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> db.js :</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> mysql <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;mysql&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> connection <span class="token operator">&#61;</span> mysql<span class="token punctuation">.</span><span class="token function">createConnection</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 设置连接信息</span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&#39;127.0.0.1&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">user</span><span class="token operator">:</span> <span class="token string">&#39;root&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">&#39;root&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">database</span><span class="token operator">:</span> <span class="token string">&#39;node&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 打开连接</span>
connection<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#39;select * from users where id&#61;1&#39;</span><span class="token punctuation">;</span>
<span class="token comment">// 发送sql语句</span>
connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> res<span class="token punctuation">,</span> filed</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 回调获取sql返回的数据</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;------------&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;------------&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>filed<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 结束连接</span>
connection<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/2019102318354658.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 添加一条数据后<br /> <img src="https://img-blog.csdnimg.cn/20191023183703709.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023183621159.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>热身完毕</strong>&#xff0c;开始真正的开发海贼王用户管理系统<br /> 你需要一个mysql数据表</p> 
<pre><code class="prism language-mysql">CREATE TABLE &#96;users&#96; (
  &#96;id&#96; int(11) NOT NULL,
  &#96;name&#96; varchar(255) NOT NULL,
  &#96;nengli&#96; varchar(255) NOT NULL,
  &#96;jituan&#96; varchar(255) NOT NULL,
  &#96;img&#96; varchar(255) NOT NULL
) ENGINE&#61;InnoDB DEFAULT CHARSET&#61;utf8;

--
-- 转存表中的数据 &#96;users&#96;
--

INSERT INTO &#96;users&#96; (&#96;id&#96;, &#96;name&#96;, &#96;nengli&#96;, &#96;jituan&#96;, &#96;img&#96;) VALUES
(1, &#39;路飞&#39;, &#39;超人系橡胶果实&#39;, &#39;草帽海贼团&#39;, &#39;&#39;),
(2, &#39;乔巴&#39;, &#39;动物系人人果实&#39;, &#39;草帽海贼团&#39;, &#39;&#39;),
(3, &#39;罗宾&#39;, &#39;超人系花花果实&#39;, &#39;草帽海贼团&#39;, &#39;&#39;),
(4, &#39;红发-香克斯&#39;, &#39;霸王色霸气、武装色霸气&#39;, &#39;红发海贼团&#39;, &#39;&#39;),
(5, &#39;鹰眼-米霍克&#39;, &#39;黑刀.夜&#39;, &#39;王下七武海&#39;, &#39;&#39;),
(6, &#39;女帝-波雅&#39;, &#39;超人系甜甜果实&#39;, &#39;九蛇海贼团、王下七武海&#39;, &#39;&#39;);

--
-- Indexes for dumped tables
--

--
-- Indexes for table &#96;users&#96;
--
ALTER TABLE &#96;users&#96;
  ADD PRIMARY KEY (&#96;id&#96;);

</code></pre> 
<p>在Navicat软件中F6 复制黏贴以上sql语句&#xff0c;回车运行完后刷新表<br /> <img src="https://img-blog.csdnimg.cn/20191023185311388.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<p><img src="https://img-blog.csdnimg.cn/20191023185208805.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<p>在开始项目之前&#xff0c;我们先了解下url模块&#xff1a;<a href="http://nodejs.cn/api/url.html#url_url_port">http://nodejs.cn/api/url.html#url_url_port</a><br /> <img src="https://img-blog.csdnimg.cn/20191023193818628.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023193940457.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<h3><a id="_1064"></a>项目初始化及安装第三方模块</h3> 
<p>新建目录 <code>haizei_com</code> , 打开命令行执行 <code> npm init</code> 初始化项目&#xff08;忘记的请看上面使用npm初始化项目&#xff09;;<br /> 一次性安装项目所需的所有模块;</p> 
<pre><code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> art-template mysql bootstrap jquery
</code></pre> 
<h3><a id="_1072"></a>启动项目</h3> 
<h4><a id="http_1073"></a>创建http服务器并加载静态页面</h4> 
<p>http.js</p> 
<pre><code class="prism language-js"><span class="token comment">// 服务器启动模块</span>
<span class="token keyword">const</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> luyou <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./luyou&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 创建服务</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 调用luyou模块中的binds方法,设置监听事件</span>
luyou<span class="token punctuation">.</span><span class="token function">binds</span><span class="token punctuation">(</span>server<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 设置服务器的监听端口</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请访问 127.0.0.1:8080&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>luyou.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 导出数据(binds方法)</span>
<span class="token comment">// binds方法设置监听</span>
module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">binds</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">server</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 解析URL为一个对象 对象中有请求路径及参数</span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// console.log(urlObj);</span>
        <span class="token keyword">var</span> method <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>method<span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// 获取请求路径,判断路径请求,</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getone&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_get</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/delete&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">delete_user</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                <span class="token comment">// 接收静态资源请求并按照请求路径响应</span>
                fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> urlObj<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_post</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>


            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// response.end(&#39;POST&#39;);</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">&#39;抱歉,不支持&#39;</span><span class="token operator">&#43;</span>method<span class="token operator">&#43;</span><span class="token string">&#39;请求&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>


    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<p>yewu.js</p> 
<pre><code class="prism language-js"><span class="token comment">// 加载引入 art-template模板引擎</span>
<span class="token keyword">var</span> template <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;art-template&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
template<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>root <span class="token operator">&#61;</span> <span class="token string">&#39;./&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> html_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">data</span><span class="token operator">:</span><span class="token number">123</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>html_data <span class="token operator">&#61;</span> html_data<span class="token punctuation">;</span>
</code></pre> 
<p>index.html</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>en<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hero - Admin<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>stylesheet<span class="token punctuation">&#34;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/node_modules/bootstrap/dist/css/bootstrap.css<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">.hero-list img</span> <span class="token punctuation">{<!-- --></span>
            <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>page-header container<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>海贼王 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>角色管理器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>container hero-list<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>btn btn-success pull-right<span class="token punctuation">&#34;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/add<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>添加英雄<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>table table-hover<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>编号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>能力<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>团体<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>操作<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>tbody<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>路飞<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>超人系橡胶果实<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>草帽海贼团<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/getone?id&#61;1<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>查看<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/upuser?id&#61;1<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>修改<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/delete?id&#61;1<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023200029936.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023200016937.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 从<strong>服务器http.js</strong>到<strong>路由luyou.js</strong>到<strong>控制器yewu.js</strong>到显示<strong>视图index.html</strong>&#xff0c;过程并不难&#xff0c;这算获取静态页面数据的完整流程&#xff0c;到这里我们加快速度&#xff0c;走一遍比较完整的代码</p> 
<h4><a id="_1201"></a>动态获取数据&#xff08;实现查改删功能&#xff09;</h4> 
<p>1&#xff0c;服务端<br /> http.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 导出数据(binds方法)</span>
<span class="token comment">// binds方法设置监听</span>
module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">binds</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">server</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 解析URL为一个对象 对象中有请求路径及参数</span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// console.log(urlObj);</span>
        <span class="token keyword">var</span> method <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>method<span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// 获取请求路径,判断路径请求,</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getone&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_get</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/delete&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">delete_user</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                <span class="token comment">// 接收静态资源请求并按照请求路径响应</span>
                fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> urlObj<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_post</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>


            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// response.end(&#39;POST&#39;);</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">&#39;抱歉,不支持&#39;</span><span class="token operator">&#43;</span>method<span class="token operator">&#43;</span><span class="token string">&#39;请求&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>


    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<p>路由<br /> luyou.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 导出数据(binds方法)</span>
<span class="token comment">// binds方法设置监听</span>
module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">binds</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">server</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 解析URL为一个对象 对象中有请求路径及参数</span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// console.log(urlObj);</span>
        <span class="token keyword">var</span> method <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>method<span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// 获取请求路径,判断路径请求,</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getone&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_get</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/delete&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">delete_user</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                <span class="token comment">// 接收静态资源请求并按照请求路径响应</span>
                fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> urlObj<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_post</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>


            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// response.end(&#39;POST&#39;);</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">&#39;抱歉,不支持&#39;</span><span class="token operator">&#43;</span>method<span class="token operator">&#43;</span><span class="token string">&#39;请求&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>


    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<p>3&#xff0c;控制器<br /> yewu.js</p> 
<pre><code class="prism language-js"><span class="token comment">// var linkdb &#61; require(&#39;./linkdb&#39;);</span>
<span class="token comment">// var template &#61; require(&#39;art-template&#39;);</span>
<span class="token comment">// template.defaults.root &#61; &#39;./&#39;;</span>
<span class="token comment">// console.log(linkdb.data);</span>
<span class="token comment">// // 使用linkdb模块导出的方法</span>
<span class="token comment">// linkdb.query(function(data){<!-- --></span>
<span class="token comment">//     // 利用回调函数获取数据</span>
<span class="token comment">//     var html_data &#61; template(&#39;./index.html&#39;,{data:data});</span>
<span class="token comment">//     exports.html_data &#61; html_data;</span>
<span class="token comment">// });</span>
<span class="token comment">// // 使用简写方法&#xff0c;比上面方法更简洁</span>
<span class="token comment">// var html_data &#61; template(&#39;./index.html&#39;,{data:linkdb.data});</span>
<span class="token comment">// exports.html_data &#61; html_data;</span>

<span class="token comment">// 加载引入 linkdb模块获取数据</span>
<span class="token keyword">var</span> db <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./linkdb&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> querystring <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;querystring&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> template <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;art-template&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
template<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>root <span class="token operator">&#61;</span> <span class="token string">&#39;./&#39;</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function-variable function">getall</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        db<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">datas</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> html_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> datas <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">getone</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>urlObj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> html_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./userinfo.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">data</span><span class="token operator">:</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">upuser_get</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>urlObj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> html_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./upuser.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">data</span><span class="token operator">:</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">delete_user</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>urlObj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>data <span class="token operator">&gt;&#61;</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token keyword">var</span> backstr <span class="token operator">&#61;</span> <span class="token string">&#34;&lt;script&gt;alert(&#39;删除成功&#39;);window.location.href&#61;&#39;/&#39;&lt;/script&gt;&#34;</span>
                res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&#39;Content-type&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;text/html;charset&#61;utf-8&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>backstr<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">upuser_post</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> data_post <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
        <span class="token comment">// 设置监听事件(数据传输)</span>
        req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;data&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">che</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            data_post<span class="token operator">&#43;&#61;</span>che<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 监听数据传输结束的事件</span>
        req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;end&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 将获取到的数据转义</span>
            <span class="token keyword">var</span> data_obj <span class="token operator">&#61;</span> querystring<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>data_post<span class="token punctuation">)</span><span class="token punctuation">;</span>
            db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>urlObj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>data_obj<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token comment">// res.end(data.toString());</span>

                <span class="token keyword">if</span><span class="token punctuation">(</span>data <span class="token operator">&gt;&#61;</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                    <span class="token keyword">var</span> backstr <span class="token operator">&#61;</span> <span class="token string">&#34;&lt;script&gt;alert(&#39;修改成功&#39;);window.location.href&#61;&#39;/&#39;&lt;/script&gt;&#34;</span>
                    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&#39;Content-type&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;text/html;charset&#61;utf-8&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>backstr<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>


            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// console.log(data_obj);</span>
           
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre> 
<p>4&#xff0c;连接与操作数据库模块<br /> linkdb.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> mysql <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;mysql&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 设置连接信息</span>
<span class="token keyword">var</span> connection <span class="token operator">&#61;</span> mysql<span class="token punctuation">.</span><span class="token function">createConnection</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&#39;127.0.0.1&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">user</span><span class="token operator">:</span> <span class="token string">&#39;root&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">&#39;root&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">database</span><span class="token operator">:</span> <span class="token string">&#39;node&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 打开连接</span>
connection<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">wh</span><span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
    <span class="token function-variable function">where</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">wh</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;</span> wh
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">select</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;select * from users&#34;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;select * from users where &#34;</span> <span class="token operator">&#43;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wh<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> sql_data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> da <span class="token operator">&#61;</span> sql_data<span class="token punctuation">;</span>
            <span class="token comment">// 调用回调函数,将数据当做实参进行函数的回调</span>
            <span class="token function">callback</span><span class="token punctuation">(</span>da<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">delete</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请加where条件,否则去死&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;delete from users where &#34;</span><span class="token operator">&#43;</span><span class="token keyword">this</span><span class="token punctuation">.</span>wh<span class="token punctuation">;</span>
            connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>datas</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token comment">// console.log(datas);</span>
                <span class="token function">callback</span><span class="token punctuation">(</span>datas<span class="token punctuation">.</span>affectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">update</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请加where条件,否则去死&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> set <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token keyword">in</span> data<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                set <span class="token operator">&#43;&#61;</span> i <span class="token operator">&#43;</span> <span class="token string">&#34;&#61;&#39;&#34;</span> <span class="token operator">&#43;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&#43;</span> <span class="token string">&#34;&#39;,&#34;</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            set <span class="token operator">&#61;</span> set<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> set<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;update users set &#34;</span> <span class="token operator">&#43;</span> set <span class="token operator">&#43;</span> <span class="token string">&#39; where &#39;</span><span class="token operator">&#43;</span><span class="token keyword">this</span><span class="token punctuation">.</span>wh<span class="token punctuation">;</span>
            <span class="token comment">// console.log(sql);</span>

            connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>datas</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token comment">// console.log(datas.changedRows);</span>
                <span class="token function">callback</span><span class="token punctuation">(</span>datas<span class="token punctuation">.</span>changedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;</span><span class="token keyword">undefined</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>
</code></pre> 
<p>5&#xff0c;三个视图模板<br /> index.html</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>en<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hero - Admin<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>stylesheet<span class="token punctuation">&#34;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/node_modules/bootstrap/dist/css/bootstrap.css<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">.hero-list img</span> <span class="token punctuation">{<!-- --></span>
            <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>page-header container<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>海贼王 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>角色管理器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>container hero-list<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>btn btn-success pull-right<span class="token punctuation">&#34;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/add<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>添加英雄<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>table table-hover<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>编号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>能力<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>团体<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>操作<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>tbody<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
                {<!-- -->{each data}}
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.id}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.nengli}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.jituan}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/getone?id&#61;{<!-- -->{$value.id}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>查看<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/upuser?id&#61;{<!-- -->{$value.id}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>修改<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/delete?id&#61;{<!-- -->{$value.id}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
                {<!-- -->{/each}}
               
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>upuser.html</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>en<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>viewport<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>width&#61;device-width, initial-scale&#61;1.0<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>X-UA-Compatible<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>ie&#61;edge<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">table</span> <span class="token punctuation">{<!-- --></span>
            <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
            <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">td</span> <span class="token punctuation">{<!-- --></span>
            <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/upuser?id&#61;{<!-- -->{data[0].id}}<span class="token punctuation">&#34;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>post<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>姓名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>name<span class="token punctuation">&#34;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>text<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>{<!-- -->{data[0].name}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>能力<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>nengli<span class="token punctuation">&#34;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>text<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>{<!-- -->{data[0].nengli}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>团体<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>jituan<span class="token punctuation">&#34;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>text<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>{<!-- -->{data[0].jituan}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>上传图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>file<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>submit<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>确认修改<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>userinfo.html</p> 
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>en<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>UTF-8<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>viewport<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>width&#61;device-width, initial-scale&#61;1.0<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>X-UA-Compatible<span class="token punctuation">&#34;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>ie&#61;edge<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>{<!-- -->{data[0].name}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>{<!-- -->{data[0].nengli}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191023210230603.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023210250363.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023210311429.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023210323341.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023210354207.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023210407315.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023211116339.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023211126492.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 以上完整实现查询&#xff0c;修改&#xff0c;删除用户的功能&#xff0c;以下让我们再仔细看看它是如何实现的。</p> 
<h3><a id="11_1593"></a>获取单个用户信息&#xff08;查询1-1&#xff09;</h3> 
<h4><a id="_1594"></a>接受前台请求</h4> 
<p>在 luyou.js 路由模块&#xff0c;获取单个用户信息</p> 
<pre><code class="prism language-js">server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> urls <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>url<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>urls<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>urls <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> data <span class="token operator">&#61;</span> yewu<span class="token punctuation">.</span>html_data<span class="token punctuation">;</span>
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urls <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">&#39;getsssss&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
        fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> urls<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>但是&#xff0c;luyou模块&#xff0c;无法处理前台不同类型的请求, 需要我们在服务器端接受并处理客户端发送的 <strong>get 及 post</strong> 请求&#xff1b;</p> 
<h4><a id="_1613"></a>获取请求类型及参数</h4> 
<p>GET 请求把所有的内容编码到访问路径中&#xff0c;POST 请求的内容全部都在请求体中。<br /> http.ServerRequest 并没有一个属性内容为请求体&#xff0c;原因是等待请求体传输可能是一件<br /> 耗时的工作&#xff0c;譬如上传文件。而很多时候我们可能并不需要理会请求体的内容&#xff0c;恶意的 POST<br /> 请求会大大消耗服务器的资源。所以 Node.js 默认是不会解析请求体的&#xff0c;当我们需要的时候&#xff0c;<br /> 只能手动来做</p> 
<blockquote> 
 <p>网络调试工具Postman&#xff0c;可以帮助我们发送各种HTTP请求&#xff0c;并接受服务器返回的数据&#xff1b;</p> 
 <p><a href="https://www.getpostman.com/">https://www.getpostman.com/</a><br /> <strong>获取请求类型</strong></p> 
</blockquote> 
<pre><code class="prism language-js"><span class="token keyword">var</span> http <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> server <span class="token operator">&#61;</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 获取请求类型</span>
    <span class="token keyword">var</span> method <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>method<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>method<span class="token punctuation">)</span><span class="token punctuation">;</span>
    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39; 请访问http://localhost:8000&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><strong>获取 GET 的请求参数</strong><br /> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQq5WOqK-1571667161270)(.\img\Snipaste_2018-10-07_12-56-34.png)]<br /> <strong>获取Post请求参数</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#34;POST&#34;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// url_obj &#61; url.parse(request.url,true);</span>
        <span class="token comment">// console.log(url_obj.query); </span>
        
        <span class="token comment">//以上代码 无内容&#xff0c;失败</span>
        <span class="token comment">// POST请求的内容全部都在请求体中 </span>
<span class="token punctuation">}</span>
</code></pre> 
<p>手册中明确说明&#xff1a;<br /> 为了支持各种可能的 HTTP 应用&#xff0c;Node.js 的 HTTP API 是非常底层的。 它只涉及流处理与消息解析。 它把一个消息解析成消息头和消息主体&#xff0c;但不解析具体的消息头或消息主体。<br /> 因此我们需要查找更底层的网络实现&#xff0c;node中的基础网络模块net模块&#xff1a; <a href="http://nodejs.cn/api/net.html">http://nodejs.cn/api/net.html</a>&#xff1a;</p> 
<pre><code class="prism language-js"><span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#34;POST&#34;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// url_obj &#61; url.parse(request.url,true);</span>
    <span class="token comment">// console.log(url_obj.query); </span>
    <span class="token comment">//以上代码 无内容&#xff0c;失败</span>
    <span class="token comment">// POST请求的内容全部都在请求体中 </span>
    <span class="token keyword">var</span> data <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
    <span class="token comment">// net 模块中的 net.Socket 提供的data及end事件 </span>
    <span class="token comment">// 绑定data事件获取数据</span>
    request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;data&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">che</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        data <span class="token operator">&#43;&#61;</span> che<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 绑定end事件&#xff0c;监听数据接受完成</span>
    request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;end&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// console.log(data);</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;querystring&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<h3><a id="12_1670"></a>获取单个用户信息&#xff08;查询1-2&#xff09;</h3> 
<p><strong>1&#xff1a; 修改路由逻辑&#xff0c;优先判断请求类型&#xff1a;</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 引入业务模块使用模板引擎加载页面</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">bind</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">server</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 优先判断请求方式</span>
        <span class="token keyword">var</span> method <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>method<span class="token punctuation">;</span>
        <span class="token comment">// 解析URL参数</span>
        <span class="token keyword">var</span> url_obj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token comment">// console.log(url_obj.query);//参数</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                <span class="token keyword">var</span> data <span class="token operator">&#61;</span> yewu<span class="token punctuation">.</span>html_data<span class="token punctuation">;</span>
                response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                
            <span class="token comment">// 判断 获取单个用户信息路由 </span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> url_obj<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>2&#xff1a; 修改静态模板&#xff0c;添加查看连接</strong></p> 
<pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/getuser?id&#61;{<!-- -->{$value.id}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>查看<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>#<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>修改<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>#<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p><strong>3&#xff1a;修改路由&#xff0c;获取get请求参数&#xff0c;并将id参数传入业务模块</strong></p> 
<pre><code class="prism language-js"><span class="token comment">// 判断 获取单个用户信息路由 </span>
<span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 获取id参数</span>
    <span class="token keyword">var</span> id <span class="token operator">&#61;</span> url_obj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
    <span class="token comment">// 在yewu模块中封装方法&#xff0c;传递id参数。</span>
    <span class="token comment">// 使用回掉函数获取数据</span>
    yewu<span class="token punctuation">.</span><span class="token function">gets</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>4&#xff1a;修改业务模块&#xff0c;添加gets方法</strong></p> 
<pre><code class="prism language-js"><span class="token comment">// 封装gets方法并导出,接受id参数及回调函数</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">gets</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 调用数据库模块的getone方法,并传入id参数</span>
    linkdb<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 利用回调函数获取数据</span>
        <span class="token keyword">var</span> user_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./users.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">data</span><span class="token operator">:</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>user_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>5&#xff1a;添加users.html静态模板</strong></p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    {<!-- -->{data[0].name}}
    {<!-- -->{data[0].nengli}}
    {<!-- -->{data[0].jituan}}
    {<!-- -->{data[0].name}}
    {<!-- -->{data[0].name}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p><strong>6&#xff1a;修改数据库模块&#xff0c;添加getone方法</strong></p> 
<pre><code class="prism language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">getone</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;select * from users where id&#61;&#34;</span><span class="token operator">&#43;</span>id<span class="token punctuation">;</span>
    <span class="token comment">// console.log(sql);</span>
    connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span>data<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 数据是通过回调函数的方式返回</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// connection.end();</span>
<span class="token punctuation">}</span>
</code></pre> 
<blockquote> 
 <p>注意&#xff1a;将数据库模块中的所有 connection.end(); 删除&#xff0c;因为我们有多个方法&#xff0c;不能在方法调用中停止数据库的连接&#xff0c;否则&#xff0c;其他方法在后续调用中无法连接数据&#xff1b;</p> 
</blockquote> 
<h3><a id="_1760"></a>链式操作原理解析</h3> 
<p><strong>链式操作的核心原理&#xff1a;</strong><br /> test.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> c <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./chained&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// c.select();</span>
c<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;2&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>chained.js</p> 
<pre><code class="prism language-js">module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function-variable function">where</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">wh</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;</span> wh<span class="token punctuation">;</span>
        <span class="token comment">// 链式操作的核心就是保存数据并返回本对象</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">select</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;select * from users &#34;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;select * from users where &#34;</span> <span class="token operator">&#43;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>whe<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sql<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">update</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;更新数据时&#xff0c;请填写where条件&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;update xx from  set () where &#34;</span> <span class="token operator">&#43;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>whe<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sql<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023212045244.png" alt="在这里插入图片描述" /><br /> 删除和修改也是同样原理&#xff0c;c.where(‘id&#61;2’).<strong>select()</strong>&#xff0c;只需更改后面的方法即可&#xff0c;但值得注意的是&#xff0c;在查改删三个方法中都要有 this.whe &#61; undefined即这是为了清空或查或改或删的条件&#xff0c;避免影响后续的操作。</p> 
<h3><a id="_1799"></a>使用链式操作灵活操作数据库</h3> 
<p><strong>1&#xff1a;新建数据操作模块 linkdb.js</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> mysql <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;mysql&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> connection <span class="token operator">&#61;</span> mysql<span class="token punctuation">.</span><span class="token function">createConnection</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&#39;localhost&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">user</span><span class="token operator">:</span> <span class="token string">&#39;root&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">&#39;root&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">database</span><span class="token operator">:</span> <span class="token string">&#39;node&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">that</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">,</span>
    <span class="token function-variable function">where</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">wh</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;</span> wh<span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">select</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;select * from users &#34;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;select * from users where &#34;</span> <span class="token operator">&#43;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>whe<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// 用完后重置where条件&#xff0c;以免后续操作的数据重复</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
        connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> results<span class="token punctuation">,</span> fields</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                <span class="token function">callback</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token function">callback</span><span class="token punctuation">(</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>2&#xff1a;修改业务模块(yewu.js)的调用</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> linkdb <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./linkdb&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> template <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;art-template&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
template<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>root <span class="token operator">&#61;</span> <span class="token string">&#39;./&#39;</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function-variable function">getall</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        db<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token comment">// 利用回调函数获取数据</span>
            <span class="token keyword">var</span> html_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">callback</span><span class="token punctuation">(</span>html_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">getone</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> user_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./users.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">data</span><span class="token operator">:</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">callback</span><span class="token punctuation">(</span>user_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>3&#xff1a;修改路由模块(luyou.js)的调用</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 引入业务模块使用模板引擎加载页面</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">bind</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">server</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 优先判断请求方式</span>
        <span class="token keyword">var</span> method <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>method<span class="token punctuation">;</span>
        <span class="token comment">// 解析URL参数</span>
        <span class="token keyword">var</span> url_obj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token comment">// console.log(url_obj.query);//参数</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                
            <span class="token comment">// 判断 获取单个用户信息路由 </span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token comment">// 获取id参数</span>
                <span class="token keyword">var</span> id <span class="token operator">&#61;</span> url_obj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
                <span class="token comment">// 在yewu模块中封装方法&#xff0c;传递id参数。</span>
                <span class="token comment">// 使用回掉函数获取数据</span>
                yewu<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> url_obj<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<h3><a id="11_1892"></a>修改用户信息&#xff08;修改1-1&#xff09;</h3> 
<h4><a id="_1893"></a>修改模板代码&#xff0c;添加链接</h4> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>tbody<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    {<!-- -->{each data}}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.id}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.nengli}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{<!-- -->{$value.jituan}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/getuser?id&#61;{<!-- -->{$value.id}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>查看<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/upuser?id&#61;{<!-- -->{$value.id}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>修改<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>#<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    {<!-- -->{/each}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<h4><a id="12_1911"></a>获取用户信息并填入表单&#xff08;修改1-2&#xff09;</h4> 
<p><strong>1&#xff1a;添加路由判断(luyou.js)</strong></p> 
<pre><code class="prism language-js"><span class="token comment">// 修改用户信息&#xff0c;先获取用户信息    </span>
<span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 获取id参数</span>
    <span class="token keyword">var</span> id <span class="token operator">&#61;</span> url_obj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
    <span class="token comment">// 在yewu模块中封装方法&#xff0c;传递id参数。</span>
    <span class="token comment">// 使用回掉函数获取数据</span>
    yewu<span class="token punctuation">.</span><span class="token function">upuser_get</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>2&#xff1a;添加业务逻辑&#xff08;yewu.js&#xff09;&#xff0c;获取用户信息</strong></p> 
<pre><code class="prism language-js"><span class="token function-variable function">upuser_get</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> user_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./upuser.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">data</span><span class="token operator">:</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>user_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>3&#xff1a;添加表单模板&#xff08;upuser.html&#xff09;</strong></p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">table</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
        <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">td</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>/upuser?id&#61;{<!-- -->{data[0].id}}<span class="token punctuation">&#34;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>post<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>姓名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>name<span class="token punctuation">&#34;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>text<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>{<!-- -->{data[0].name}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>能力<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>nengli<span class="token punctuation">&#34;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>text<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>{<!-- -->{data[0].nengli}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>团体<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>tuanti<span class="token punctuation">&#34;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>text<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>{<!-- -->{data[0].jituan}}<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>上传图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>file<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>submit<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>修改<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<h4><a id="post13_1975"></a>获取并处理post提交数据&#xff0c;修改数据库&#xff08;修改1-3&#xff09;</h4> 
<p><strong>路由模块(luyou.js)</strong></p> 
<pre><code class="prism language-js"> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
     <span class="token comment">// 只要是POST请求&#xff0c;则优先获取数据</span>
     <span class="token comment">// 后处理路由逻辑</span>
     <span class="token keyword">var</span> data <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
     request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;data&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">che</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
         data <span class="token operator">&#43;&#61;</span> che<span class="token punctuation">;</span>
     <span class="token punctuation">}</span><span class="token punctuation">)</span>
     <span class="token comment">// 绑定end事件&#xff0c;监听数据接受完成</span>
     request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;end&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
         <span class="token comment">// console.log(data);</span>
         <span class="token comment">// 获取Post传输的数据</span>
         <span class="token keyword">var</span> post_data <span class="token operator">&#61;</span> querystring<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
         <span class="token comment">// 路由判断</span>
         <span class="token keyword">if</span> <span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
             <span class="token comment">// 调用业务层方法</span>
             yewu<span class="token punctuation">.</span><span class="token function">upuser_post</span><span class="token punctuation">(</span>url_obj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">,</span> post_data<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                 response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
             <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span><span class="token punctuation">)</span>
 <span class="token punctuation">}</span>
</code></pre> 
<p><strong>业务模块&#xff08;yewu.js&#xff09;</strong></p> 
<pre><code class="prism language-js"><span class="token function-variable function">upuser_post</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span>data<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 调用数据模块修改用户信息</span>
    db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">changedRows</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// http服务器相应要求必须是字符串</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>changedRows<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>数据库模块&#xff08;linkdb.js&#xff09;</strong></p> 
<pre><code class="prism language-js"><span class="token function-variable function">update</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 没where条件&#xff0c;则停止所有操作</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>where <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token function">callback</span><span class="token punctuation">(</span><span class="token string">&#39;error&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 拼接sql语句的set部分</span>
    <span class="token keyword">var</span> set <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span>v <span class="token keyword">in</span> data<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        set <span class="token operator">&#43;&#61;</span> v <span class="token operator">&#43;</span><span class="token string">&#34;&#61;&#39;&#34;</span><span class="token operator">&#43;</span> data<span class="token punctuation">[</span>v<span class="token punctuation">]</span><span class="token operator">&#43;</span><span class="token string">&#34;&#39;,&#34;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">var</span> sets <span class="token operator">&#61;</span> set<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span>set<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;UPDATE &#96;users&#96; SET &#34;</span><span class="token operator">&#43;</span>sets <span class="token operator">&#43;</span> <span class="token string">&#39; where &#39;</span><span class="token operator">&#43;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>whe<span class="token punctuation">;</span>
    <span class="token comment">// console.log(sql);</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>whe <span class="token operator">&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
    connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span>res<span class="token punctuation">,</span>fields</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// console.log(error)</span>
        <span class="token comment">// 返回受影响行数</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>changedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<h4><a id="_2034"></a>删除操作</h4> 
<p><strong>路由模块(luyou.js)</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 导出数据(binds方法)</span>
<span class="token comment">// binds方法设置监听</span>
module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">binds</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">server</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;request&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 解析URL为一个对象 对象中有请求路径及参数</span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// console.log(urlObj);</span>
        <span class="token keyword">var</span> method <span class="token operator">&#61;</span> request<span class="token punctuation">.</span>method<span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// 获取请求路径,判断路径请求,</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/getone&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_get</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/delete&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">delete_user</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
                <span class="token comment">// 接收静态资源请求并按照请求路径响应</span>
                fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span> <span class="token operator">&#43;</span> urlObj<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>method <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>urlObj<span class="token punctuation">.</span>pathname <span class="token operator">&#61;&#61;</span> <span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                yewu<span class="token punctuation">.</span><span class="token function">upuser_post</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>


            <span class="token comment">// console.log(urls);</span>
            <span class="token comment">// response.end(&#39;POST&#39;);</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">&#39;抱歉,不支持&#39;</span><span class="token operator">&#43;</span>method<span class="token operator">&#43;</span><span class="token string">&#39;请求&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>


    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>业务模块&#xff08;yewu.js&#xff09;</strong></p> 
<pre><code class="prism language-js"><span class="token function-variable function">delete_user</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> urlObj <span class="token operator">&#61;</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>urlObj<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>data <span class="token operator">&gt;&#61;</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token keyword">var</span> backstr <span class="token operator">&#61;</span> <span class="token string">&#34;&lt;script&gt;alert(&#39;删除成功&#39;);window.location.href&#61;&#39;/&#39;&lt;/script&gt;&#34;</span>
                res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&#39;Content-type&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;text/html;charset&#61;utf-8&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>backstr<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> 
<p><strong>数据库模块&#xff08;linkdb.js&#xff09;</strong></p> 
<pre><code class="prism language-js">
    <span class="token function-variable function">delete</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请加where条件,否则去死&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">var</span> sql <span class="token operator">&#61;</span> <span class="token string">&#34;delete from users where &#34;</span><span class="token operator">&#43;</span><span class="token keyword">this</span><span class="token punctuation">.</span>wh<span class="token punctuation">;</span>
            connection<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>datas</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token comment">// console.log(datas);</span>
                <span class="token function">callback</span><span class="token punctuation">(</span>datas<span class="token punctuation">.</span>affectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>wh <span class="token operator">&#61;</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> 
<h2><a id="ES6JS_2112"></a>ES6语法及JS语言的其他特性&#xff08;拓展&#xff0c;重要&#xff09;</h2> 
<h3><a id="ECMAScript_2113"></a>ECMAScript的变迁</h3> 
<p>ECMAScript 1.0&#xff08;1997年&#xff09;<br /> ECMAScript 2.0&#xff08;1998年&#xff09;<br /> ECMAScript 3.0&#xff08;1999年12月&#xff09;<br /> ECMAScript 4.0 (太激进,夭折了)<br /> ECMAScript 5.0 (2009)<br /> ECMAScript 6.0 (2015)<br /> 3.0版是一个巨大的成功&#xff0c;在业界得到广泛支持&#xff0c;成为通行标准&#xff0c;奠定了JavaScript语言的基本语法&#xff0c;以后的版本完全继承。<br /> 直到今天&#xff0c;初学者一开始学习JavaScript&#xff0c;其实就是在学3.0版的语法。<br /> 5.0版和3.0版区别不大。<br /> 随着JS的崛起,应用于移动开发,后端开发,游戏开发等,业界对JS的语言的要求越来越高.<br /> 此时再看4.0时提出的设想,已经不显得激进了.于是,6.0版本终于通过了.<br /> 此标准严格的叫法应是<code>ECMAScript2015</code>,当然叫<code>ES6</code>也没啥,没人和你抬杠.<br /> ESMAScript 与 JavaScript 两者的关系, 就如同 <em>快捷宾馆营业标准</em> 和 <em>如家酒店</em> 一样.<br /> <strong>浏览器支持情况</strong><br /> <a href="http://kangax.github.io/compat-table/es6/">http://kangax.github.io/compat-table/es6/</a></p> 
<h3><a id="_2129"></a>变量的声明</h3> 
<h4><a id="let__2130"></a>let 块级证明</h4> 
<p>ES6 新增了<code>let</code>命令&#xff0c;用来声明变量。<br /> 它的用法类似于<code>var</code>&#xff0c;但是所声明的变量&#xff0c;只在<code>let</code>命令所在的代码块内有效。<br /> 看下例:<br /> test.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">&#61;</span> <span class="token number">4</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 同时打印多条数据</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023213751115.png" alt="在这里插入图片描述" /><br /> 再看下例:</p> 
<pre><code class="prism language-js"><span class="token punctuation">{<!-- --></span>
  <span class="token keyword">let</span> c <span class="token operator">&#61;</span> <span class="token string">&#39;hello&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> b <span class="token operator">&#61;</span> <span class="token string">&#39;world&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment">//ReferenceError: c is not defined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token comment">// world</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023214018930.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 可以看出: <code>let</code>命令在定义的<code>{}</code>内生效,某些语言也有类似特点&#xff0c;我们将其称为&#34;块级作用域&#34;.<br /> 这样,<code>let</code>定义的变量,只在块内生效,不影响其他区域,所以我们说Ta更 “清洁”.<br /> 在某些场合下,用<code>let</code>特别适合,比如<code>for()</code>循环</p> 
<pre><code class="prism language-js"><span class="token comment">// 设置i仅为循环数组,但循环后,残留一个变量i.</span>
<span class="token keyword">var</span> arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token string">&#39;a&#39;</span> <span class="token punctuation">,</span> <span class="token string">&#39;b&#39;</span> <span class="token punctuation">,</span> <span class="token string">&#39;c&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">&#61;</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">&#43;&#43;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
</code></pre> 
<p>换成<code>let</code>再试一下,是不是更清洁?</p> 
<pre><code class="prism language-js"><span class="token comment">// i变量只在for()内有效,不污染其他区域</span>
<span class="token keyword">var</span> arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token string">&#39;a&#39;</span> <span class="token punctuation">,</span> <span class="token string">&#39;b&#39;</span> <span class="token punctuation">,</span> <span class="token string">&#39;c&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">&#61;</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">&#43;&#43;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ReferenceError: i is not defined </span>
</code></pre> 
<p>不污染全局的window属性</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> c <span class="token operator">&#61;</span> <span class="token string">&#39;hello&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> d <span class="token operator">&#61;</span> <span class="token string">&#39;world&#39;</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span>d<span class="token punctuation">;</span> <span class="token comment">//undefined</span>
window<span class="token punctuation">.</span>c<span class="token punctuation">;</span> <span class="token comment">//hello</span>
</code></pre> 
<p>注:同域下,var ,let 声明同一变量名,error</p> 
<blockquote> 
 <p>let 申明的变量不存在变量提升</p> 
 <p>let 申明的变量不允许重复声明</p> 
 <p>let 申明的变量存在块级作用域</p> 
</blockquote> 
<h4><a id="const__2182"></a>const 常量</h4> 
<p>常量并不稀奇 (话外音&#xff1a;都21世纪了&#xff0c;你咋现在才有?)<br /> PHP,Java,C,C&#43;&#43; …多数语言都有常量.<br /> <code>const</code> 声明一个只读的常量。一旦声明&#xff0c;常量的值就不能改变。<br /> 常量,即不可改变其值的量.</p> 
<pre><code class="prism language-js"><span class="token keyword">const</span> <span class="token constant">PI</span> <span class="token operator">&#61;</span> <span class="token number">3.14</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 一旦声明值不可修改</span>
<span class="token constant">PI</span> <span class="token operator">&#61;</span> <span class="token number">3.15</span><span class="token punctuation">;</span> <span class="token comment">// TypeError: Assignment to constant variable.</span>
<span class="token comment">// 不可重复声明</span>
<span class="token keyword">const</span> <span class="token constant">PI</span> <span class="token operator">&#61;</span> <span class="token number">3.15</span><span class="token punctuation">;</span> <span class="token comment">// Identifier &#39;PI&#39; has already been declare</span>
<span class="token comment">// 因为声明后值不能修改&#xff0c;所以声明必须赋值</span>
<span class="token keyword">const</span> c <span class="token punctuation">;</span><span class="token comment">// Missing initializer in const declaration</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023215133142.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<blockquote> 
 <p>但如果const申明的是对象其对象的属性是可以改变&#xff0c;可以被赋值引用<br /> 原因是常量一旦申明后不可改变是它开辟的地址值是不可改变的&#xff0c;因为声明对象又开辟临时储存地址&#xff0c;这个新的地址值的与旧地址值不同&#xff0c;可以重新赋值&#xff0c;如下</p> 
</blockquote> 
<p>注:常量名和变量名,都区分大小写</p> 
<pre><code class="prism language-js"><span class="token keyword">const</span> <span class="token constant">STU</span> <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;lucy&#39;</span> <span class="token punctuation">,</span> <span class="token literal-property property">age</span> <span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">STU</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { name: &#39;lucy&#39;, age: 22 }</span>
<span class="token constant">STU</span><span class="token punctuation">.</span>name <span class="token operator">&#61;</span> <span class="token string">&#39;lily&#39;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">STU</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { name: &#39;lily&#39;, age: 22 }</span>
</code></pre> 
<p>注&#xff1a;常量不可改变的是其引用地址&#xff1b;</p> 
<h3><a id="_2209"></a>模板字符</h3> 
<p>ES6用反引号 <strong>( &#96; )</strong> 包住字符串,可以让字符串多行书写,也可以自由的嵌入变量.</p> 
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> <span class="token string">&#39;world&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;李四&#39;</span><span class="token punctuation">}</span>
<span class="token keyword">let</span> str <span class="token operator">&#61;</span> <span class="token template-string"><span class="token template-punctuation string">&#96;</span><span class="token string">hello</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>obj<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token function">t</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> , </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token number">7</span> <span class="token operator">&#43;</span> <span class="token number">9</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> , </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token string">&#39;ok&#39;</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,
这是个换行
</span><span class="token template-punctuation string">&#96;</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// hello李四 world , 16 , ok,</span>
<span class="token comment">// 这是个换行</span>
</code></pre> 
<h3><a id="_2223"></a>变量的解构赋值</h3> 
<p>ES6 允许按照一定模式&#xff0c;从数组和对象中提取值&#xff0c;对变量进行赋值&#xff0c;这被称为解构&#xff08;Destructuring&#xff09;。<br /> 字符串解构赋值</p> 
<pre><code class="prism language-javascript"><span class="token keyword">const</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">,</span> e<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token string">&#39;hello&#39;</span><span class="token punctuation">;</span>
a <span class="token comment">// &#34;h&#34;</span>
b <span class="token comment">// &#34;e&#34;</span>
c <span class="token comment">// &#34;l&#34;</span>
d <span class="token comment">// &#34;l&#34;</span>
e <span class="token comment">// &#34;o&#34;</span>
</code></pre> 
<h4><a id="_2234"></a>数组的解构赋值</h4> 
<p>以前&#xff0c;为变量赋值&#xff0c;只能直接指定值。</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">&#61;</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> c <span class="token operator">&#61;</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token comment">//ES6允许写成下面这样。</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre> 
<p>上面代码表示&#xff0c;可以从数组中提取值&#xff0c;按照对应位置&#xff0c;对变量赋值。<br /> 本质上&#xff0c;这种写法属于“模式匹配”&#xff0c;只要等号两边的模式相同&#xff0c;左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。</p> 
<pre><code class="prism language-js"><span class="token keyword">let</span> <span class="token punctuation">[</span>foo<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>bar<span class="token punctuation">]</span><span class="token punctuation">,</span> baz<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
foo <span class="token comment">// 1</span>
bar <span class="token comment">// 2</span>
baz <span class="token comment">// 3</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span> <span class="token punctuation">,</span> <span class="token punctuation">,</span> third<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token string">&#34;foo&#34;</span><span class="token punctuation">,</span> <span class="token string">&#34;bar&#34;</span><span class="token punctuation">,</span> <span class="token string">&#34;baz&#34;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
third <span class="token comment">// &#34;baz&#34;</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>x<span class="token punctuation">,</span> <span class="token punctuation">,</span> y<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
x <span class="token comment">// 1</span>
y <span class="token comment">// 3</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>head<span class="token punctuation">,</span> <span class="token operator">...</span>tail<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
head <span class="token comment">// 1</span>
tail <span class="token comment">// [2, 3, 4]</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> <span class="token operator">...</span>z<span class="token punctuation">]</span> <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
x <span class="token comment">// &#34;a&#34;</span>
y <span class="token comment">// undefined</span>
z <span class="token comment">// []</span>
</code></pre> 
<h4><a id="_2263"></a>对象的解构赋值</h4> 
<p>解构不仅可以用于数组&#xff0c;还可以用于对象。</p> 
<pre><code class="prism language-javascript"><span class="token keyword">let</span> <span class="token punctuation">{<!-- --></span> foo<span class="token punctuation">,</span> bar <span class="token punctuation">}</span> <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token string">&#34;aaa&#34;</span><span class="token punctuation">,</span> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token string">&#34;bbb&#34;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
foo <span class="token comment">// &#34;aaa&#34;</span>
bar <span class="token comment">// &#34;bbb&#34;</span>
</code></pre> 
<p>对象的解构与数组有一个重要的不同。数组的元素是按次序排列的&#xff0c;变量的取值由它的位置决定&#xff1b;而对象的属性没有次序&#xff0c;变量必须与属性同名&#xff0c;才能取到正确的值。</p> 
<pre><code class="prism language-javascript"><span class="token keyword">let</span> <span class="token punctuation">{<!-- --></span> bar<span class="token punctuation">,</span> foo <span class="token punctuation">}</span> <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token string">&#34;aaa&#34;</span><span class="token punctuation">,</span> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token string">&#34;bbb&#34;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
foo <span class="token comment">// &#34;aaa&#34;</span>
bar <span class="token comment">// &#34;bbb&#34;</span>
<span class="token keyword">let</span> <span class="token punctuation">{<!-- --></span> name <span class="token punctuation">}</span> <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token string">&#34;aaa&#34;</span><span class="token punctuation">,</span> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token string">&#34;bbb&#34;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
name <span class="token comment">// undefined</span>
</code></pre> 
<p>上面代码的第一个例子&#xff0c;等号左边的两个变量的次序&#xff0c;与等号右边两个同名属性的次序不一致&#xff0c;但是对取值完全没有影响。第二个例子的变量没有对应的同名属性&#xff0c;导致取不到值&#xff0c;最后等于<code>undefined</code>。</p> 
<h3><a id="_2279"></a>对象的扩展</h3> 
<h4><a id="_2280"></a>属性的简洁表示法</h4> 
<p>ES6 允许直接写入变量和函数&#xff0c;作为对象的属性和方法。这样的书写更加简洁。</p> 
<pre><code class="prism language-javascript"><span class="token keyword">const</span> foo <span class="token operator">&#61;</span> <span class="token string">&#39;bar&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> baz <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>foo<span class="token punctuation">}</span><span class="token punctuation">;</span>
baz <span class="token comment">// {foo: &#34;bar&#34;}</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">const</span> baz <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span><span class="token literal-property property">foo</span><span class="token operator">:</span> foo<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> 
<p>上面代码表明&#xff0c;ES6 允许在对象之中&#xff0c;直接写变量。这时&#xff0c;属性名为变量名, 属性值为变量的值。</p> 
<h4><a id="_2290"></a>方法的简洁表示法</h4> 
<p>除了属性简写&#xff0c;方法也可以简写。</p> 
<pre><code class="prism language-javascript"><span class="token keyword">function</span> <span class="token function">fun</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">&#43;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">fun</span><span class="token operator">:</span>fun<span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">var</span> obj <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">,</span>
    fun<span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">4</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 7</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">var</span> obj <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span>
    <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">&#43;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">6</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 11</span>
</code></pre> 
<p>CommonJS 模块输出一组数据及方法&#xff0c;就非常合适使用简洁写法。</p> 
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">getItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">setItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token punctuation">}</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span> getItem<span class="token punctuation">,</span> setItem<span class="token punctuation">,</span> clear <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 等同于</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">getItem</span><span class="token operator">:</span> getItem<span class="token punctuation">,</span>
    <span class="token literal-property property">setItem</span><span class="token operator">:</span> setItem<span class="token punctuation">,</span>
    <span class="token literal-property property">clear</span><span class="token operator">:</span> clear
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> 
<h3><a id="Promise__2333"></a>Promise 异步控制对象&#xff08;重要&#xff09;</h3> 
<blockquote> 
 <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises</a></p> 
</blockquote> 
<h4><a id="_Promise_2335"></a>为什么要使用 Promise</h4> 
<p><strong>先看简单简述</strong><br /> 有a.txt,b.txt,c.txt&#xff0c;内容为&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191023220407240.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 现在依次读取这三个文件的内容并打印出来<br /> rfs.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./a.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./b.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./c.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023220547752.png" alt="在这里插入图片描述" /><br /> <strong>以读取文件内容为例&#xff1a;</strong><br /> <strong>无法保证顺序的代码</strong></p> 
<pre><code class="prism language-javascript"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./a.txt&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// return console.log(&#39;读取失败&#39;)</span>
    <span class="token comment">// 抛出异常</span>
    <span class="token comment">//    1. 阻止程序的执行</span>
    <span class="token comment">//    2. 把错误消息打印到控制台</span>
    <span class="token keyword">throw</span> err
  <span class="token punctuation">}</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./b.txt&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// return console.log(&#39;读取失败&#39;)</span>
    <span class="token comment">// 抛出异常</span>
    <span class="token comment">//    1. 阻止程序的执行</span>
    <span class="token comment">//    2. 把错误消息打印到控制台</span>
    <span class="token keyword">throw</span> err
  <span class="token punctuation">}</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./c.txt&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// return console.log(&#39;读取失败&#39;)</span>
    <span class="token comment">// 抛出异常</span>
    <span class="token comment">//    1. 阻止程序的执行</span>
    <span class="token comment">//    2. 把错误消息打印到控制台</span>
    <span class="token keyword">throw</span> err
  <span class="token punctuation">}</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p><strong>无法保证顺序的代码&#xff1f;见鬼&#xff0c;不存在的</strong><br /> <img src="https://img-blog.csdnimg.cn/20191023221117787.png" alt="在这里插入图片描述" /><br /> 我们仍然能以正确的顺序读取&#xff0c;但是我们用更好方式实现不是更好吗<br /> <strong>通过回调嵌套的方式来保证顺序&#xff1a;</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./a.txt&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// return console.log(&#39;读取失败&#39;)</span>
    <span class="token comment">// 抛出异常</span>
    <span class="token comment">//    1. 阻止程序的执行</span>
    <span class="token comment">//    2. 把错误消息打印到控制台</span>
    <span class="token keyword">throw</span> err
  <span class="token punctuation">}</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
  fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./b.txt&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token comment">// return console.log(&#39;读取失败&#39;)</span>
      <span class="token comment">// 抛出异常</span>
      <span class="token comment">//    1. 阻止程序的执行</span>
      <span class="token comment">//    2. 把错误消息打印到控制台</span>
      <span class="token keyword">throw</span> err
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./c.txt&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// return console.log(&#39;读取失败&#39;)</span>
        <span class="token comment">// 抛出异常</span>
        <span class="token comment">//    1. 阻止程序的执行</span>
        <span class="token comment">//    2. 把错误消息打印到控制台</span>
        <span class="token keyword">throw</span> err
      <span class="token punctuation">}</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023214820102.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 多层使用回调函数&#xff0c;就会进入 “<strong>回调地狱</strong>”</p> 
<pre><code class="prism language-js"><span class="token comment">// 多层回调会进入 &#34;回调地狱&#34;</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./a.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./b.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>da2</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>da2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./c.txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>da3</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>da3<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>为了解决以上编码方式带来的问题&#xff08;回调地狱嵌套&#xff09;&#xff0c;所以在 EcmaScript 6 中新增了一个 API&#xff1a;<code>Promise</code>。</p> 
<h4><a id="Promise__2446"></a>Promise 的使用</h4> 
<p>初步使用&#xff0c;先读取一个文件<br /> promise.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span>
<span class="token comment">// 在 EcmaScript 6 中新增了一个 API Promise</span>
<span class="token comment">// Promise 是一个构造函数</span>
<span class="token comment">// 创建 Promise 容器</span>
<span class="token comment">// 1. 给别人一个承诺 I promise you.</span>
<span class="token comment">//    Promise 容器一旦创建&#xff0c;就开始执行里面的代码</span>
<span class="token keyword">var</span> p1 <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  <span class="token comment">// console.log(2)</span>
  fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;./a.txt&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token comment">// 失败了&#xff0c;承诺容器中的任务失败了</span>
      <span class="token comment">// console.log(err)</span>
      <span class="token comment">// 把容器的 Pending 状态变为 Rejected</span>
      <span class="token comment">// 调用 reject 就相当于调用了 then 方法的第二个参数函数</span>
      <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
      <span class="token comment">// console.log(3)</span>
      <span class="token comment">// 承诺容器中的任务成功了</span>
      <span class="token comment">// console.log(data)</span>
      <span class="token comment">// 把容器的 Pending 状态改为成功 Resolved</span>
      <span class="token comment">// 也就是说这里调用的 resolve 方法实际上就是 then 方法传递的那个 function</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// console.log(4)</span>
<span class="token comment">// p1 就是那个承若</span>
<span class="token comment">// 当 p1 成功了 然后(then) 做指定的操作</span>
<span class="token comment">// then 方法接收的 function 就是容器中的 resolve 函数</span>
p1<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;读取文件失败了&#39;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023222118988.png" alt="在这里插入图片描述" /></p> 
<p>封装 Promise 版本的 <code>readFile</code>:<br /> pro.js</p> 
<pre><code class="prism language-javascript"><span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">pReadFile</span><span class="token punctuation">(</span><span class="token parameter">files</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">succ<span class="token punctuation">,</span>err</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>files<span class="token punctuation">,</span><span class="token string">&#39;utf8&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span>data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token function">succ</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">pReadFile</span><span class="token punctuation">(</span><span class="token string">&#39;./a.txt&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span><span class="token punctuation">(</span><span class="token function">pReadFile</span><span class="token punctuation">(</span><span class="token string">&#39;./b.txt&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span><span class="token punctuation">(</span><span class="token function">pReadFile</span><span class="token punctuation">(</span><span class="token string">&#39;./c.txt&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023222816465.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/2019102322301150.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023223524294.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 可读性变强也避免了回调地狱现象的发生</p> 
<h3><a id="_2517"></a>箭头函数</h3> 
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions</a><br /> ES6 允许使用“箭头”&#xff08;<code>&#61;&gt;</code>&#xff09;定义函数。<br /> <strong>箭头函数表达式</strong>的语法比 <em>函数表达式</em> 更短&#xff0c;并且没有自己的 this&#xff0c;arguments。这些函数表达式更适用于那些本来需要匿名函数的地方&#xff0c;并且它们不能用作构造函数。<br /> fun.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">fun1</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">s1<span class="token punctuation">,</span>s2</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> s1<span class="token operator">&#43;</span>s2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ES6中新函数的的声明方式</span>
<span class="token comment">// 箭头函数</span>
<span class="token keyword">var</span> <span class="token function-variable function">fun2</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token parameter">s1<span class="token punctuation">,</span>s2</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> s1<span class="token operator">&#43;</span>s2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> <span class="token function-variable function">fun3</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token parameter">s1<span class="token punctuation">,</span>s2</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span> s1<span class="token operator">&#43;</span>s2<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fun1</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fun2</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fun3</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023223811251.png" alt="在这里插入图片描述" /><br /> fun.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">f</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token parameter">s</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> b <span class="token operator">&#61;</span> s<span class="token operator">&#43;</span>a<span class="token punctuation">;</span>
    <span class="token keyword">return</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">f</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// return 不是c onsole ,没打印值出来</span>


<span class="token keyword">var</span> obj1 <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;lisi&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">fun</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
obj1<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/2019102322432028.png" alt="在这里插入图片描述" /><br /> fun.js</p> 
<pre><code class="prism language-js">
<span class="token keyword">var</span> obj1 <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;lisi&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">fun</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
obj1<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> obj2 <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;刘能&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">fun</span><span class="token operator">:</span>obj1<span class="token punctuation">.</span>fun<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
obj2<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023224456381.png" alt="在这里插入图片描述" /><br /> fun.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> name <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj1 <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;lisi&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">fun</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// console.log(this.name);</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
obj1<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> obj2 <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;刘能&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">fun</span><span class="token operator">:</span>obj1<span class="token punctuation">.</span>fun<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
obj2<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023224647217.png" alt="在这里插入图片描述" /></p> 
<blockquote> 
 <p>如果参数只有一个&#xff0c;可以将()省略 // arr.map(c&#61;&gt;c&#43;1);<br /> 如果没有参数&#xff0c;则一定能要写上() // ()&#61;&gt; console.log(‘a’)<br /> 如果多于一个参数&#xff0c;每个参数之间用逗号分隔 (x, y) &#61;&gt; { … }<br /> 如果方法体只有一句代码&#xff0c;可以省略{} 和分号&#xff0c;如果有返回可以省略return<br /> 如果方法体多于一句代码&#xff0c;则不能省略{} ,每句代码使用 分号分隔<br /> <strong>注意&#xff1a;</strong><br /> a. 箭头函数没有自己的this&#xff0c;函数体内部写的this&#xff0c;指向的是外层代码块的this<br /> b. 箭头函数内部的this是定义时所在的对象&#xff0c;而不是使用时所在的对象并且不会改变<br /> c. 箭头箭头函数不能用作构造函数<br /> d. 箭头函数内部不存在arguments&#xff0c;箭头函数体中使用的arguments其实指向的是外层函数的arguments<br /> 箭头就是让你当做一个普通函数来使用,别整花里胡哨;</p> 
</blockquote> 
<h2><a id="express__2611"></a>express 框架</h2> 
<h3><a id="_2612"></a>简介</h3> 
<p>Express 是基于 Node.js 平台&#xff0c;快速、开放、极简的 Web 开发框架, 提供一系列强大特性帮助你创建各种Web应用。Express 不对 node.js 已有的特性进行二次抽象&#xff0c;我们只是在它之上扩展了Web应用所需的功能。丰富的HTTP工具以及来自Connect框架的中间件随取随用&#xff0c;创建强健、友好的<strong>API</strong>变得快速又简单<br /> <img src="https://img-blog.csdnimg.cn/20191023225047892.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023225127936.png" alt="在这里插入图片描述" /></p> 
<h3><a id="_2616"></a>安装使用</h3> 
<p>就像一个普通的第三方模块一样安装即可&#xff1b;</p> 
<pre><code class="prism language-shell"><span class="token function">npm</span> init
</code></pre> 
<pre><code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> express
</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023225723360.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <strong>express基本使用</strong><br /> http.js</p> 
<pre><code class="prism language-js"><span class="token comment">// var express &#61; require(&#39;express&#39;);</span>
<span class="token comment">// var app &#61; express();</span>

<span class="token comment">// app.get(&#39;/&#39;,function(req,res){<!-- --></span>
<span class="token comment">//     res.send(&#39;hello world&#39;);</span>
<span class="token comment">// })</span>

<span class="token comment">// app.listen(&#39;666&#39;,function(){<!-- --></span>
<span class="token comment">//     console.log(&#39;请求访问 127.0.0.1:666&#39;)</span>
<span class="token comment">// });</span>
<span class="token comment">// 相同的效果</span>
<span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;hello world&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;666&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;请求访问 127.0.0.1:666&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre> 
<p><img src="https://img-blog.csdnimg.cn/20191023230336412.png" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/20191023230326270.png" alt="在这里插入图片描述" /><br /> 其中 <a href="http://www.expressjs.com.cn/4x/api.html">Request、Response – API</a> 我们需要重点关注<br /> 在熟悉express框架时&#xff0c;我们需要使用<strong>网络调试工具Postman</strong>&#xff0c;没有的请先移步<a href="https://www.pcsoft.com.cn/soft/178575.html">https://www.pcsoft.com.cn/soft/178575.html</a></p> 
<h2><a id="_2657"></a>项目的重构</h2> 
<p>将我们之前的海贼王项目使用express框架进行重写&#xff0c;重写过程中&#xff0c;学习框架提供的各种API&#xff0c;并完善项目功能&#xff1b;</p> 
<h3><a id="_2659"></a>启动服务器</h3> 
<p>http.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;8000&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;127.0.0.1&#xff1a;8000&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<h3><a id="_2668"></a>重写路由模块&#xff08;快速过一遍&#xff0c;理解即可&#xff09;</h3> 
<p>之前我们写了一个独立的模块&#xff08;luyou.js&#xff09;来处理请求&#xff0c;而在 express 中已经帮我们写好了路由的请求处理规则&#xff0c;不需要我们进行判断&#xff1b;<br /> <em><strong>路由</strong></em> 是指确定应用程序如何响应对特定端点的客户端请求&#xff0c;该请求是URI&#xff08;或路径&#xff09;和特定HTTP请求方法&#xff08;GET&#xff0c;POST等&#xff09;。<br /> 每个路由都可以有一个或多个处理函数&#xff0c;这些函数在路由匹配时执行。</p> 
<h4><a id="express__2672"></a>express 中的基本路由</h4> 
<p>路径定义采用以下结构&#xff1a;</p> 
<pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
</code></pre> 
<p>以下示例定义了简单路由。<br /> <code>Hello World!</code>在主页上回复&#xff1a;</p> 
<pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;Hello World!&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>在根路由&#xff08;<code>/</code>&#xff09;&#xff0c;应用程序的主页上响应POST请求&#xff1a;</p> 
<pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;Got a POST request&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>响应对<code>/user</code>路由的PUT请求&#xff1a;</p> 
<pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">&#39;/user&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;Got a PUT request at /user&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>响应对<code>/user</code>路由的DELETE请求&#xff1a;</p> 
<pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">&#39;/user&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;Got a DELETE request at /user&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<h4><a id="_2702"></a>外置路由</h4> 
<p>设置 外置路由 rout.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> router <span class="token operator">&#61;</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;123&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/user&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;user&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/edit&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;post_edit&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 导出 router</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> router<span class="token punctuation">;</span>
</code></pre> 
<p>写好路由规则&#xff0c;一定要记得将 路由对象(router) 导出</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 引入外置路由</span>
<span class="token keyword">var</span> rout <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./rout&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>rout<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 使用引入外置的路由</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;8000&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;127.0.0.1&#xff1a;8000&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>将外置路由引入后&#xff0c;使用 app.use() 进行加载使用&#xff1b;</p> 
<h4><a id="_2731"></a>使用外置路由修改项目</h4> 
<p>在 luyou.js 中&#xff0c;注释以前的代码&#xff0c;添加新代码</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> router <span class="token operator">&#61;</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> router<span class="token punctuation">;</span>
</code></pre> 
<p>在 http.js 中&#xff0c;使用 express 启动服务&#xff0c;并引入使用新修改的 luyou.js 模块</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> luyou <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./luyou&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>luyou<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;8080&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;127.0.0.1:8080&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<h4><a id="_2754"></a>使用链式操作添加路由</h4> 
<p>luyou.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> router <span class="token operator">&#61;</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// express的路由支持链式操作</span>
router
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// req 提供了query属性获取请求参数</span>
    <span class="token keyword">var</span> id <span class="token operator">&#61;</span> req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
    <span class="token comment">// 在yewu模块中封装方法&#xff0c;传递id参数。</span>
    <span class="token comment">// 使用回掉函数获取数据</span>
    yewu<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> router<span class="token punctuation">;</span>
</code></pre> 
<h4><a id="_2778"></a>优化路由模块</h4> 
<p>路由模块 (luyou.js) 中只负责调用&#xff0c;调用时&#xff0c;将req res 传入业务模块</p> 
<pre><code class="prism language-js">router
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    yewu<span class="token punctuation">.</span><span class="token function">getall</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// yewu.getall(function (data) {<!-- --></span>
    <span class="token comment">//     res.end(data);</span>
    <span class="token comment">// })</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    yewu<span class="token punctuation">.</span><span class="token function">getone</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// req 提供了query属性获取请求参数</span>
    <span class="token comment">// var id &#61; req.query.id;</span>
    <span class="token comment">// // 在yewu模块中封装方法&#xff0c;传递id参数。</span>
    <span class="token comment">// // 使用回掉函数获取数据</span>
    <span class="token comment">// yewu.getone(id, function (data) {<!-- --></span>
    <span class="token comment">//     res.end(data);</span>
    <span class="token comment">// });</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>业务模块接受 req res 负责处理请求并响应数据</p> 
<pre><code class="prism language-js"><span class="token function-variable function">getall</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    db<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 利用回调函数获取数据</span>
        <span class="token keyword">var</span> html_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./index.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// console.log(html_data);</span>
        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">getone</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span><span class="token operator">&#43;</span>req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> user_data <span class="token operator">&#61;</span> <span class="token function">template</span><span class="token punctuation">(</span><span class="token string">&#39;./users.html&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">data</span><span class="token operator">:</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>user_data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> 
<p><strong>继续简化路由模块</strong></p> 
<pre><code class="prism language-js">router
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>getall<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>getone<span class="token punctuation">)</span>
</code></pre> 
<p>原理&#xff1a;</p> 
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> a <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> b <span class="token operator">&#61;</span> <span class="token number">2</span><span class="token punctuation">;</span>
    <span class="token function">callback</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> <span class="token function-variable function">pros</span> <span class="token operator">&#61;</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token operator">&#43;</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token function">pros</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// fn(pros);</span>
</code></pre> 
<h3><a id="_2837"></a>重写模板引擎</h3> 
<p><a href="https://github.com/aui/art-template/issues/369">art-template&#64;4 新特性</a><br /> <a href="https://github.com/aui/express-art-template">express-art-template</a><br /> 安装&#xff1a;</p> 
<pre><code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> --save art-template
<span class="token function">npm</span> <span class="token function">install</span> --save express-art-template
</code></pre> 
<p>官方示例&#xff1a;</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">engine</span><span class="token punctuation">(</span><span class="token string">&#39;art&#39;</span><span class="token punctuation">,</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express-art-template&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&#39;view options&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">debug</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">!&#61;&#61;</span> <span class="token string">&#39;production&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">&#39;index.art&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
        <span class="token literal-property property">user</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;aui&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">tags</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;art&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;template&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;nodejs&#39;</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>修改 http.js 将 express-art-template 注册为express框架的模板引擎&#xff0c;并设置模板后缀为 html<br /> <img src="https://img-blog.csdnimg.cn/20191024000602142.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> <img src="https://img-blog.csdnimg.cn/2019102400124834.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 在项目中新建views目录&#xff0c;将所有静态页面放入views目录<br /> <img src="https://img-blog.csdnimg.cn/2019102400134013.png" alt="在这里插入图片描述" /></p> 
<h3><a id="_Express__2867"></a>利用 Express 托管静态文件</h3> 
<p><a href="http://www.expressjs.com.cn/starter/static-files.html">http://www.expressjs.com.cn/starter/static-files.html</a><br /> 在项目中新建 public 文件夹并将bootstrap.css移入&#xff0c; 修改 index.html 加载 css 静态文件 &#xff0c;在http.js中引入并设置静态资源加载路径&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191024001746103.png" alt="在这里插入图片描述" /><br /> 如果要使用多个静态资源目录&#xff0c;请多次调用 <code>express.static</code> 函数&#xff1a;</p> 
<pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&#39;public&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&#39;files&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> 
<p>访问静态资源文件时&#xff0c;<code>express.static</code> 函数会根据目录的添加顺序查找所需的文件。</p> 
<h3><a id="_2877"></a>完成项目重构</h3> 
<p>修改所有路由及业务模块代码<br /> luyou.js</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> yewu <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./yewu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> router <span class="token operator">&#61;</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
router
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>getall<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>getone<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>upuser_get<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>upuser_post<span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> router<span class="token punctuation">;</span>
</code></pre> 
<p>yewu.js</p> 
<pre><code class="prism language-js"><span class="token comment">// var linkdb &#61; require(&#39;./linkdb&#39;);</span>
<span class="token keyword">var</span> db <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./db&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> querystring <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;querystring&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// template.defaults.root &#61; &#39;./&#39;;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function-variable function">getall</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        db<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">getone</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span> <span class="token operator">&#43;</span> req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">&#39;./users.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">upuser_get</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span> <span class="token operator">&#43;</span> req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">&#39;./upuser.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">upuser_post</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> data <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
        req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;data&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">che</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            data <span class="token operator">&#43;&#61;</span> che<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token comment">// 绑定end事件&#xff0c;监听数据接受完成</span>
        req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;end&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token comment">// console.log(data);</span>
            <span class="token comment">// 获取Post传输的数据</span>
            <span class="token keyword">var</span> post_data <span class="token operator">&#61;</span> querystring<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 调用数据模块修改用户信息</span>
            db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span> <span class="token operator">&#43;</span> req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>post_data<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">changedRows</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                <span class="token comment">// http服务器相应要求必须是字符串</span>
                res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span>changedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
<h3><a id="_2932"></a>修改用户头像</h3> 
<h4><a id="_2933"></a>测试文件上传</h4> 
<p>创建服务器&#xff1a;</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/upfile&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> data <span class="token operator">&#61;</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
    req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;data&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">che</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        data <span class="token operator">&#43;&#61;</span> che<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    req<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;end&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 直接打印post传过来的数据</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;8000&#39;</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;127.0.0.1&#xff1a;8000&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>使用postman工具上传文件&#xff1a;</p> 
<h4><a id="_2953"></a>借助第三方插件处理文件上传</h4> 
<p><a href="https://www.npmjs.com/package/formidable">https://www.npmjs.com/package/formidable</a><br /> 安装模块</p> 
<pre><code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> formidable
</code></pre> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> formidable <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;formidable&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> fs <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/upfile&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> form <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">formidable<span class="token punctuation">.</span>IncomingForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token comment">// form.uploadDir &#61; &#39;./img&#39;; // 设置上传路径</span>
    <span class="token comment">// form.keepExtensions &#61; true; // 保留文件扩展名</span>
    form<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> fields<span class="token punctuation">,</span> files</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> times <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 组装上传路径</span>
        <span class="token keyword">var</span> file_path <span class="token operator">&#61;</span> <span class="token string">&#39;./img/&#39;</span><span class="token operator">&#43;</span>times<span class="token operator">&#43;</span>files<span class="token punctuation">.</span>imgs<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
        <span class="token comment">// 将缓存文件移动至制定目录</span>
        fs<span class="token punctuation">.</span><span class="token function">rename</span><span class="token punctuation">(</span>files<span class="token punctuation">.</span>imgs<span class="token punctuation">.</span>path<span class="token punctuation">,</span>file_path<span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span><span class="token operator">&#61;&gt;</span><span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>file_path<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;8000&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;127.0.0.1&#xff1a;8000&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<h4><a id="_2986"></a>在项目中实现文件上传</h4> 
<p>修改 upuser.html<br /> <img src="https://img-blog.csdnimg.cn/20191024011608575.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 修改业务模块 yewu.js 使用 formidable 获取 post 数据&#xff0c;实现文件上传</p> 
<pre><code class="prism language-js"><span class="token function-variable function">upuser_post</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> form <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">formidable<span class="token punctuation">.</span>IncomingForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    form<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> fields<span class="token punctuation">,</span> files</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">var</span> times <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 组装上传路径</span>
        <span class="token keyword">var</span> file_path <span class="token operator">&#61;</span> <span class="token string">&#39;./public/img/&#39;</span> <span class="token operator">&#43;</span> times <span class="token operator">&#43;</span> files<span class="token punctuation">.</span>imgs<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
        <span class="token comment">// 将缓存文件移动至指定的public目录</span>
        fs<span class="token punctuation">.</span><span class="token function">rename</span><span class="token punctuation">(</span>files<span class="token punctuation">.</span>imgs<span class="token punctuation">.</span>path<span class="token punctuation">,</span> file_path<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                <span class="token comment">// 因为设置静态资源时&#xff0c;已经时public文件夹&#xff0c;写入数据库时&#xff0c;不要加public</span>
                fields<span class="token punctuation">.</span>img <span class="token operator">&#61;</span> <span class="token string">&#39;./img/&#39;</span> <span class="token operator">&#43;</span> times <span class="token operator">&#43;</span> files<span class="token punctuation">.</span>imgs<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
                db<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string">&#39;id&#61;&#39;</span> <span class="token operator">&#43;</span> req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>fields<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">changedRows</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                    <span class="token comment">// http服务器相应要求必须是字符串</span>
                    res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span>changedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;文件上传失败&#39;</span><span class="token operator">&#43;</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<h3><a id="_3013"></a>用户登陆</h3> 
<h4><a id="cookiesession__3014"></a>登陆逻辑及cookie-session 的使用</h4> 
<p>express官方资源中&#xff0c;为我们提供了一个中间件&#xff0c;<a href="http://www.expressjs.com.cn/en/resources/middleware/cookie-session.html">cookie-session</a></p> 
<pre><code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> cookie-session
</code></pre> 
<p>测试代码&#xff1a;</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> cookieSession <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;cookie-session&#39;</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 注册中间件 </span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">cookieSession</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;session&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 客户端cookie的名称</span>
    <span class="token literal-property property">keys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;ss&#39;</span><span class="token punctuation">]</span> <span class="token comment">// 用于加密的关键字</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 获取并判断session</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>session<span class="token punctuation">.</span>sess_data<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;已经登陆&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 如果没有session,跳转到登陆页面</span>
        res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;&lt;script&gt;alert(&#34;没登陆&#34;);window.location.href&#61;&#34;/up&#34;&lt;/script&gt;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/up&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 展示登陆页面&#xff0c;获取用户数据并写入session </span>
    req<span class="token punctuation">.</span>session<span class="token punctuation">.</span>sess_data <span class="token operator">&#61;</span> <span class="token punctuation">{<!-- --></span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token number">12</span><span class="token punctuation">,</span><span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">89</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;已写入session&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<h4><a id="_3047"></a>完成项目登陆功能</h4> 
<p><strong>修改http模块&#xff0c;注册 cookie-session 中间件&#xff1b;</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> cookieSession <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;cookie-session&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 注册中间件 </span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">cookieSession</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;session&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 客户端cookie的名称</span>
    <span class="token literal-property property">keys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;xilingzuishuai&#39;</span><span class="token punctuation">]</span> <span class="token comment">// 用于加密的关键字</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> 
<p><strong>在业务模块 (yewu.js) 中 添加逻辑判断&#xff0c;只有登陆后才能展示首页&#xff1a;</strong></p> 
<pre><code class="prism language-js"><span class="token function-variable function">getall</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 获取并判断session</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>req<span class="token punctuation">.</span>session<span class="token punctuation">.</span>sess_data<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        db<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">data</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// 如果没有session,跳转到登陆页面</span>
        res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;&lt;script&gt;alert(&#34;没登陆&#34;);window.location.href&#61;&#34;/upload&#34;&lt;/script&gt;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// res.send(&#39;没登陆&#39;);</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> 
<p><strong>在路由模块(luyou.js) 中添加以下两个路由&#xff0c;get 展示静态登陆页面&#xff0c;post 获取用户提交的数据并写入 session ,写入成功后&#xff0c;跳转到首页&#xff1b;在业务模块(yewu.js)中添加响应的方法</strong><br /> <code>.get(&#39;/upload&#39;,yewu.upload_get)</code> <code>.post(&#39;/upload&#39;,yewu.upload_post)</code></p> 
<pre><code class="prism language-js"><span class="token function-variable function">upload_get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 展示登陆页面</span>
    res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">&#39;./upload.html&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">upload_post</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">var</span> form <span class="token operator">&#61;</span> <span class="token keyword">new</span> <span class="token class-name">formidable<span class="token punctuation">.</span>IncomingForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    form<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> fields<span class="token punctuation">,</span> files</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">// console.log(fields);</span>
        <span class="token comment">// 获取用户提交数据&#xff0c;判断用户名密码是否正确</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>fields<span class="token punctuation">.</span>userName <span class="token operator">&#61;&#61;</span> <span class="token string">&#34;admin&#34;</span> <span class="token operator">&amp;&amp;</span> fields<span class="token punctuation">.</span>pwd <span class="token operator">&#61;&#61;</span> <span class="token string">&#34;123&#34;</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token comment">// 数据正确&#xff0c;写入session</span>
            req<span class="token punctuation">.</span>session<span class="token punctuation">.</span>sess_data <span class="token operator">&#61;</span> fields<span class="token punctuation">;</span>
            res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;&lt;script&gt;alert(&#34;登陆成功&#34;);window.location.href&#61;&#34;/&#34;&lt;/script&gt;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            <span class="token comment">// 数据错误&#xff0c;重新跳回登陆页面</span>
            res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&#39;&lt;script&gt;alert(&#34;登陆失败&#34;);window.location.href&#61;&#34;/upload&#34;&lt;/script&gt;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
<h2><a id="Express_3097"></a>Express的中间件</h2> 
<h3><a id="_3098"></a>什么是中间件</h3> 
<p><img src="https://img-blog.csdnimg.cn/20191024011818605.png" alt="在这里插入图片描述" /><br /> 在一个整体的流程中的某个环节&#xff0c;因为某些原因加入了额外的处理环节&#xff1b;</p> 
<h3><a id="_3101"></a>中间件的使用</h3> 
<h4><a id="_3102"></a>应用中间件</h4> 
<p>语法&#xff1a;</p> 
<blockquote> 
 <ul><li> <p>app.use()</p> 
   <ul><li>app.use(function(){})</li></ul> </li></ul> 
 <p>无论发送任何请求都会执行的中间件</p> 
 <ul><li>app.use(‘/path’, function(){})</li></ul> 
 <p>只要在请求path路由时才会执行的中间件&#xff08;无论GET/POST&#xff09;</p> 
 <ul><li> <p>app.method()</p> 
   <ul><li>app.get()</li></ul> </li></ul> 
 <p>在get请求时会执行的中间件</p> 
 <ul><li>app.post()</li></ul> 
 <p>在post请求时会执行的中间件<br /> <strong>app.use() 的用法</strong></p> 
</blockquote> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 在中间件之前&#xff0c;不受中间件影响</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 应用中间件</span>
<span class="token comment">// 请求 &#39;/user&#39; 时&#xff0c;会先调用中间件</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>req<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 调用之前先调用中间件</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/user&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;user&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;8000&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;127.0.0.1&#xff1a;8000&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p><strong>app.method() 的用法</strong></p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> express <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> app <span class="token operator">&#61;</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 在中间件之前&#xff0c;不受中间件影响</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 应用中间件</span>
<span class="token comment">// 只有在 post 请求user 时才起作用</span>
app<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/user&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>req<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 调用之前先调用中间件</span>
<span class="token comment">// 接受所有请求方式请求user</span>
app<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token string">&#39;/user&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;user&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token string">&#39;8000&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;127.0.0.1&#xff1a;8000&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<h4><a id="_3168"></a>路由中间件</h4> 
<p>路由器层中间件的工作方式与应用层中间件基本相同&#xff0c;差异之处在于它绑定到 <code>express.Router()</code> 的实例。<br /> 使用 <code>router.use()</code> 和 <code>router.METHOD()</code> 函数装入路由器层中间件&#xff1b;<br /> 我们之前项目的代码&#xff0c;就是在使用路由中间件&#xff1a;</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> router <span class="token operator">&#61;</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
router
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>getall<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/getuser&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>getone<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>upuser_get<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/upuser&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>upuser_post<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/upload&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>upload_get<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;/upload&#39;</span><span class="token punctuation">,</span>yewu<span class="token punctuation">.</span>upload_post<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
</code></pre> 
<h4><a id="_3183"></a>内置中间件</h4> 
<p>除 <code>express.static</code> 外&#xff0c;先前 Express 随附的所有中间件函数现在以单独模块的形式提供&#xff1a;<a href="https://github.com/senchalabs/connect#middleware">中间件函数的列表</a><br /> Express 中唯一内置的中间件函数是 <code>express.static</code>。此函数基于 <a href="https://github.com/expressjs/serve-static">serve-static</a>&#xff0c;负责提供 Express 应用程序的静态资源。<br /> 对于每个应用程序&#xff0c;可以有多个静态目录&#xff1a;</p> 
<pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&#39;public&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&#39;uploads&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&#39;files&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<h4><a id="_3192"></a>第三方中间件</h4> 
<p>使用第三方中间件向 Express 应用程序添加功能。<br /> 安装具有所需功能的 Node.js 模块&#xff0c;然后在应用层或路由器层的应用程序中将其加装入。</p> 
<pre><code class="prism language-js"><span class="token keyword">var</span> cookieSession <span class="token operator">&#61;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;cookie-session&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 注册中间件 </span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">cookieSession</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;session&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 客户端cookie的名称</span>
    <span class="token literal-property property">keys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;xilingzuishuai&#39;</span><span class="token punctuation">]</span> <span class="token comment">// 用于加密的关键字</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> 
<p>最终效果预览&#xff1a;<br /> <img src="https://img-blog.csdnimg.cn/20191024012040461.png?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2hpaHUyMDE5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
<blockquote> 
 <p>参考资源相关列表:</p> 
 <p><a href="https://nodejs.org/zh-cn/">https://nodejs.org/zh-cn/</a> node.js官网</p> 
 <p><a href="http://nodejs.cn/">http://nodejs.cn/</a> node.js中文网</p> 
 <p>《深入浅出Node.js》 朴灵著 &#xff0c;人民邮电出版社</p> 
 <p><a href="http://es6.ruanyifeng.com/">《ECMAScript 6 入门》(第三版)</a> 阮一峰著 &#xff0c;电子工业出版社</p> 
 <p>《你不知道的JavaScript》(上、中、下卷) [美] Kyle Simpson 著 &#xff0c;人民邮电出版社</p> 
 <p><a href="http://www.expressjs.com.cn/">http://www.expressjs.com.cn/</a> express中文网</p> 
</blockquote>
                </div>
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-98b95bb57c.css" rel="stylesheet">
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">
        </div>
        <div id="treeSkill"></div>
    </article>
<script>
  $(function() {
    setTimeout(function () {
      var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
      if (mathcodeList.length > 0) {
        for (let i = 0; i < mathcodeList.length; i++) {
          if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
            var alt = mathcodeList[i].alt;
            alt = '\\(' + alt + '\\)';
            var curSpan = $('<span class="img-codecogs"></span>');
            curSpan.text(alt);
            $(mathcodeList[i]).before(curSpan);
            $(mathcodeList[i]).remove();
          }
        }
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
      }
    }, 1000)
  });
</script>
</div>
    <div class="more-toolbox-new" id="toolBarBox">
      <div class="left-toolbox">
        <div class="toolbox-left">
            <div class="profile-box">
              <a class="profile-href" target="_blank" href="https://blog.csdn.net/heshihu2019"><img class="profile-img" src="https://profile-avatar.csdnimg.cn/default.jpg!1">
                <span class="profile-name">
                  程序员达芬奇
                </span>
              </a>
            </div>
            <div class="profile-attend">
                <a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view='{"mod":"1592215036_002","spm":"1001.2101.3001.4232","extend1":"关注"}'>关注</a>
              <a class="tool-item-follow active-animation" style="display:none;">关注</a>
            </div>
        </div>
        <div class="toolbox-middle">
          <ul class="toolbox-list">
            <li class="tool-item tool-item-size tool-active is-like" id="is-like">
              <a class="tool-item-href">
                <img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt="">
                <img class="isactive" style="display:none" id="is-like-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Active.png" alt="">
                <img class="isdefault" style="display:block" id="is-like-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Black.png" alt="">
                <span id="spanCount" class="count ">
                      0
                </span>
              </a>
              <div class="tool-hover-tip"><span class="text space">点赞</span></div>
            </li>
            <li class="tool-item tool-item-size tool-active is-unlike" id="is-unlike">
              <a class="tool-item-href">
                <img class="isactive" style="margin-right:0px;display:none" id="is-unlike-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Active.png" alt="">
                <img class="isdefault" style="margin-right:0px;display:block" id="is-unlike-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Black.png" alt="">
                <span id="unlikeCount" class="count "></span>
              </a>
              <div class="tool-hover-tip"><span class="text space">踩</span></div>
            </li>
            <li class="tool-item tool-item-size tool-active is-collection ">
              <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_824","spm":"1001.2101.3001.4130","ab":"new"}'>
                <img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive.png" alt="">
                <img class="isdefault" id="is-collection-img" style="display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectBlack.png" alt="">
                <img class="isactive" id="is-collection-imgactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt="">
                <span class="count get-collection " id="get-collection">
                    8
                </span>
              </a>
              <div class="tool-hover-tip collect">
                <div class="collect-operate-box">
                  <span class="collect-text" id="is-collection">
                    收藏
                  </span>
                </div>
              </div>
              <div class="tool-active-list">
                <div class="text">
                  觉得还不错?
                  <span class="collect-text" id="tool-active-list-collection">
                    一键收藏
                  </span>
                 <img id="tool-active-list-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png" alt="">
                </div>
              </div>
            </li>
                <li class="tool-item tool-item-size tool-active tool-item-reward">
                  <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_830","spm":"1001.2101.3001.4237","dest":"","ab":"new"}'>
                    <img class="isdefault reward-bt" id="rewardBtNew" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newRewardBlack.png" alt="打赏">
                    <span class="count"></span>
                  </a>
                  <div class="tool-hover-tip"><span class="text space">打赏</span></div>
                </li>
          <li class="tool-item tool-item-size tool-active tool-item-comment">
            <div class="guide-rr-first">
              <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward01.png" alt="">
              <button class="btn-guide-known">知道了</button>
            </div>
              <a class="tool-item-href go-side-comment" data-report-click='{"spm":"1001.2101.3001.7009"}'>
              <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newComment2021Black.png" alt="">
              <span class="count">
                    0
              </span>
            </a>
            <div class="tool-hover-tip"><span class="text space">评论</span></div>
          </li>
          <li class="tool-item tool-item-bar">
          </li>
          <li class="tool-item tool-item-size tool-active tool-QRcode" data-type="article" id="tool-share">
            <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"1582594662_002","spm":"1001.2101.3001.4129","ab":"new"}'>
              <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newShareBlack.png" alt="">
            </a>
              <div class="QRcode" id="tool-QRcode">
            <div class="share-bg-icon icon1" id="shareBgIcon"></div>
              <div class="share-bg-box">
                <div class="share-content">
                    <img class="share-avatar" src="https://profile-avatar.csdnimg.cn/default.jpg!1" alt="">
                  <div class="share-tit">
                    这可能是全网最详细的Node.js编程
                  </div>
                  <div class="share-dec">
                    NodeJS起步下载安装下载历史版本windows下安装过程：此安装路径尽量不要改对于已经装过的，重新安装就会升级安装成功后，打开命令行，输入node --version 或者 node -v  (显示node的版本号)表示安装成功其他平台的安装方式： https://nodejs.org/zh-cn/download/package-manager/R......
                  </div>
                  <a id="copyPosterUrl" class="url" data-report-click='{"spm":"1001.2101.3001.7493"}' data-report-view='{"spm":"1001.2101.3001.7493"}'>复制链接</a>
                </div>
                <div class="share-code">
                  <div class="share-code-box" id='shareCode'></div>
                  <div class="share-code-text">扫一扫</div>
                </div>
              </div>
                <div class="share-code-type">
                </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="toolbox-right">
            <div class="tool-directory">
                <a class="bt-columnlist-show"
                  data-id="11698971"
                  data-free="true"
                  data-subscribe="false"
                  data-title="前端"
                  data-img="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
                  data-url="https://blog.csdn.net/heshihu2019/category_11698971.html"
                  data-sum="3"
                  data-people="0"
                  data-price="0"
                  data-oldprice="0"
                  data-join="false"
                  data-studyvip="false"
                  data-studysubscribe="false"
                  data-report-view='{"spm":"1001.2101.3001.6334","extend1":"专栏目录"}'
                  data-report-click='{"spm":"1001.2101.3001.6334","extend1":"专栏目录"}'>专栏目录</a>
          </div>
</div>
</div>
</div>
<script type=text/javascript crossorigin src="https://csdnimg.cn/release/phoenix/production/qrcode-7c90a92189.min.js"></script>
<script src="//g.csdnimg.cn/??sharewx/1.2.1/sharewx.js" type="text/javascript"></script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/collection-box/2.1.2/collection-box.js"></script>                <div class="first-recommend-box recommend-box ">
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/sxhsxhsxhsxhsxh/10255607"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-download-2~default~CTRLIST~Paid-1-10255607-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"1","strategy":"2~default~CTRLIST~Paid","dest":"https://download.csdn.net/download/sxhsxhsxhsxhsxh/10255607"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/sxhsxhsxhsxhsxh/10255607" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-download-2~default~CTRLIST~Paid-1-10255607-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"1","strategy":"2~default~CTRLIST~Paid","dest":"https://download.csdn.net/download/sxhsxhsxhsxhsxh/10255607"}'  data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7ECTRLIST%7EPaid-1-10255607-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7ECTRLIST%7EPaid-1-10255607-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>node</em>js开发实战-源<em>代码</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">02-23</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/sxhsxhsxhsxhsxh/10255607" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-download-2~default~CTRLIST~Paid-1-10255607-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"1","strategy":"2~default~CTRLIST~Paid","dest":"https://download.csdn.net/download/sxhsxhsxhsxhsxh/10255607"}'  data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7ECTRLIST%7EPaid-1-10255607-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7ECTRLIST%7EPaid-1-10255607-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">《<em>node.js</em>开发实战》，2018年1月版，忽如寄著，书中所有示例的<em>代码</em></div>
			</a>
		</div>
	</div>
</div>
                </div>
              <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_commontools-ad67eb7a7a.min.js" type="text/javascript" async></script>
                <div class="second-recommend-box recommend-box ">
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/weixin_43463260/10731443"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Paid-1-10731443-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"1","strategy":"2~default~BlogCommendFromBaidu~Paid","dest":"https://download.csdn.net/download/weixin_43463260/10731443"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/weixin_43463260/10731443" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Paid-1-10731443-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"1","strategy":"2~default~BlogCommendFromBaidu~Paid","dest":"https://download.csdn.net/download/weixin_43463260/10731443"}'  data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7EPaid-1-10731443-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7EPaid-1-10731443-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>node</em>js <em>项目</em>源<em>代码</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">10-19</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/weixin_43463260/10731443" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Paid-1-10731443-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"1","strategy":"2~default~BlogCommendFromBaidu~Paid","dest":"https://download.csdn.net/download/weixin_43463260/10731443"}'  data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7EPaid-1-10731443-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7EPaid-1-10731443-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1"><em>node</em>js开发的一个<em>项目</em>，源<em>代码</em>附上，包括部署方式里面都有！欢迎下载</div>
			</a>
		</div>
	</div>
</div>
                </div>
<a id="commentBox" name="commentBox"></a>
<div id="pcCommentBox" class="comment-box comment-box-new2 login-comment-box-new" style="display:none">
    <div class="has-comment" style="display:block">
      <div class="one-line-box">
        <div class="has-comment-tit go-side-comment">
          <span class="count">0</span>&nbsp;条评论
        </div>
        <div class="has-comment-con comment-operate-item"></div>
        <a class="has-comment-bt-right go-side-comment focus">写评论</a>
      </div>
    </div>
</div>              <div class="recommend-box insert-baidu-box recommend-box-style ">
                <div class="recommend-item-box no-index" style="display:none"></div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_33940102/article/details/93017276"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-93017276-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"2","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/weixin_33940102/article/details/93017276"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/weixin_33940102/article/details/93017276" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-93017276-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"2","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/weixin_33940102/article/details/93017276"}'  data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-93017276-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-93017276-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">分针网&mdash;&mdash;IT教育：<em>node</em>JS新建一个<em>项目</em>及<em>代码</em>详解</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_33940102" target="_blank"><span class="blog-title">weixin_33940102的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">05-08</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					518
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/weixin_33940102/article/details/93017276" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-93017276-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"2","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/weixin_33940102/article/details/93017276"}'  data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-93017276-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-93017276-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">有了解<em>node</em>js的童鞋们知道，<em>node</em>js有很多的依赖，那么我们在新建一个<em>项目</em>的时候，如何快速的导入这些依赖从而创建一个<em>node</em>js<em>项目</em>呢，接下来会<em>详细</em>介绍。这里安利一个<em>前端</em>开发工具&mdash;&mdash;webstorm。真的很好用，除了有点（或许不是一点点）占内存，打开的时候有点慢。在工作中用这个会很方便（在考虑要不要写一篇<em>前端</em>开发工具的比较，吼吼吼~(≧▽≦)/~）下面我们来用命令创建一...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_34995862/article/details/100560655"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-100560655-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"3","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_34995862/article/details/100560655"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/qq_34995862/article/details/100560655" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-100560655-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"3","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_34995862/article/details/100560655"}'  data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-100560655-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-100560655-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>Node.js</em>写脚本常用<em>代码</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_34995862" target="_blank"><span class="blog-title">楠辞琦咎 难上加楠 出琦止胜</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-05</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					568
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/qq_34995862/article/details/100560655" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-100560655-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"3","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_34995862/article/details/100560655"}'  data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-100560655-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-100560655-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">实现了个输入命令自动打包提交git的<em>node</em>脚本，将用过的点子收集了一下：
///// dabao.js
const {execSync} = require(&#39;child_process&#39;);    //执行脚本<em>代码</em>
const chalk = require(&#39;chalk&#39;); //颜色插件
const inquirer = require(&#39;inquirer&#39;);   //用户交互插件
co...</div>
			</a>
		</div>
	</div>
</div>
		<dl id="recommend-item-box-tow" class="recommend-item-box type_blog clearfix">
			
		</dl>
<div class="recommend-item-box type_blog clearfix" data-url="https://chocolate.blog.csdn.net/article/details/103703715"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-103703715-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"4","strategy":"2~default~CTRLIST~Rate","dest":"https://chocolate.blog.csdn.net/article/details/103703715"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://chocolate.blog.csdn.net/article/details/103703715" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-103703715-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"4","strategy":"2~default~CTRLIST~Rate","dest":"https://chocolate.blog.csdn.net/article/details/103703715"}'  data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-103703715-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-103703715-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">【最新】什么是<em>Node.js</em>?  |  npm与cnpm有啥区别？</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_42429718" target="_blank"><span class="blog-title">超逸の学习技术博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">12-25</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					627
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://chocolate.blog.csdn.net/article/details/103703715" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-103703715-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"4","strategy":"2~default~CTRLIST~Rate","dest":"https://chocolate.blog.csdn.net/article/details/103703715"}'  data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-103703715-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-103703715-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">文章目录一、<em>Node.js</em>的诞生二、npm是世界上最大软件包仓库三、npm与cnpm有区别？四、总结
一、<em>Node.js</em>的诞生
先来聊聊 <em>Node.js</em> 诞生的故事，了解一下它最早的定位，以及后来定位的变化。
<em>Node.js</em> 是2009的时候由大神 Ryan Dahl 开发的。Ryan 的本职工作是用 C++ 写服务器，后来他总结出一个经验，一个高性能服务器应该是满足&ldquo;事件驱动，非阻塞 I/O&rdquo;模...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_65848822/article/details/126830319"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-126830319-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"5","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_65848822/article/details/126830319"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/qq_65848822/article/details/126830319" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-126830319-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"5","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_65848822/article/details/126830319"}'  data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-5-126830319-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-5-126830319-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>Node.js</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_65848822" target="_blank"><span class="blog-title">今天也要学习！！的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-13</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					537
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/qq_65848822/article/details/126830319" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-126830319-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"5","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_65848822/article/details/126830319"}'  data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-5-126830319-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-5-126830319-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">为了提高js的格调，让js脱离浏览器也能运行，一代大神Ryan Dahl在2009年，通过分析将谷歌中V8引擎（即谷歌浏览器中的js解析器），分离出来，进行二次封装，做出了一款软件，叫<em>node.js</em>。所以说，<em>node.js</em>本质上是一个js除了浏览器之外的运行环境，使得js除了是一门客户端语言外，还是一门和Java、PHP、Ruby平起平坐的客户端语言。3.<em>node.js</em>让js在写<em>前端</em><em>代码</em>的基础上，可以写后端<em>代码</em>，因为<em>node.js</em>可以构建服务器。这款软件中可以运行js<em>代码</em>，且不需要依赖浏览器和HTML。</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_41957626/article/details/128210911"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-128210911-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_41957626/article/details/128210911"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/weixin_41957626/article/details/128210911" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-128210911-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_41957626/article/details/128210911"}'  data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-128210911-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-128210911-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>Node.js</em><em>编程</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_41957626" target="_blank"><span class="blog-title">简单点的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">12-06</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					845
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/weixin_41957626/article/details/128210911" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-128210911-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_41957626/article/details/128210911"}'  data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-128210911-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-128210911-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">采用<em>node</em>+express+mongoDB数据库实现的增删改查操作</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/osmunds/article/details/114078216"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-114078216-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"7","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/osmunds/article/details/114078216"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/osmunds/article/details/114078216" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-114078216-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"7","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/osmunds/article/details/114078216"}'  data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-114078216-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-114078216-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>node</em>js[完整版]</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/osmunds" target="_blank"><span class="blog-title">osmunds的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">04-15</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					146
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/osmunds/article/details/114078216" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-114078216-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"7","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/osmunds/article/details/114078216"}'  data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-114078216-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-114078216-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">jsonp跨域资源

swig模板

1，什么是swig？
 是<em>node</em>js提供一个模板引擎
 php（smart），java（jsp）
 swig允许我们在视图上做一个绑定数据的操作，提取公共网页结构

 2，swig作用：
 1，减少http请求的数量，释放服务器压力，提高服务器性能
 2，提取公共模板，当模板发生变化，减少工作量
 3，swig：服务端渲染 （前后端不分离是开发 SSR：server si...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_37883657/article/details/121242918"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-8-121242918-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"8","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_37883657/article/details/121242918"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/weixin_37883657/article/details/121242918" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-8-121242918-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"8","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_37883657/article/details/121242918"}'  data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-8-121242918-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-8-121242918-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>Node.js</em>高级<em>编程</em>【一】<em>node</em> 基础</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_37883657" target="_blank"><span class="blog-title">weixin_37883657的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">12-10</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					1140
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/weixin_37883657/article/details/121242918" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-8-121242918-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"8","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_37883657/article/details/121242918"}'  data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-8-121242918-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-8-121242918-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1"><em>Node</em> 基础


1、课程概述

<em>Node.js</em>可以做什么 ？



2、<em>Node.js</em> 架构



Native modules


Builtin modules &quot;胶水层&quot;


底层




3、为什么是<em>Node.js</em> ？

<em>Node</em> 慢慢演化为一门服务端&ldquo;语言&rdquo;



IO 是计算过程操作过程中最缓慢的环节



Reactor 模式，单线程完成多线程工作

Reactor 模式下实现异步IO、事件驱动

<em>Node.js</em> 更适用于 IO 密集型高并发请求

4、<em>Node.js</em> 的 异步...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/HUSBANDL/article/details/121529569"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-9-121529569-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"9","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/HUSBANDL/article/details/121529569"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/HUSBANDL/article/details/121529569" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-9-121529569-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"9","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/HUSBANDL/article/details/121529569"}'  data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-9-121529569-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-9-121529569-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>Node</em>JS基础知识（里面的<em>代码</em>仅供参考）</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/HUSBANDL" target="_blank"><span class="blog-title">HUSBANDL的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">11-30</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					1651
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/HUSBANDL/article/details/121529569" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-9-121529569-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"9","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/HUSBANDL/article/details/121529569"}'  data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-9-121529569-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-9-121529569-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">一、<em>Node</em>js简介

1、初识<em>Node</em>JS

<em>Node</em>JS是基于Chrome V8引擎的javascript运行环境。

2、模块

<em>Node</em>JS中有很多内置API模块：fs、path、http、js内置对象、querystring、etc；不包含DOM和BOM无法操作。

3、学会<em>Node</em>JS都能做什么？

1、可以基于<em>Node</em>的express框架做web应用开发

2、可以基于Electron框架，可以构建跨平台的桌面应用

3、可以基于restify框架。可以实行接口开发

4、可以对数据库操作..</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/qq_40312194/10547554"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-10-10547554-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"10","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/qq_40312194/10547554"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/qq_40312194/10547554" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-10-10547554-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"10","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/qq_40312194/10547554"}'  data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10547554-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10547554-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">express搭建<em>node</em>js<em>项目</em>源<em>代码</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">07-17</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/qq_40312194/10547554" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-10-10547554-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"10","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/qq_40312194/10547554"}'  data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10547554-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10547554-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1"><em>node</em>js基于express框架搭建<em>项目</em>的<em>代码</em>，直接通过127.0.0.1:3000就可以直接访问</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/jizhunboss/87775230"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-11-87775230-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"11","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/jizhunboss/87775230"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/jizhunboss/87775230" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-11-87775230-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"11","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/jizhunboss/87775230"}'  data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-87775230-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-87775230-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">66个ChatGPT<em>全网</em>最热话题.docx</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">05-11</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/jizhunboss/87775230" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-11-87775230-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"11","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/jizhunboss/87775230"}'  data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-87775230-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-87775230-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">66个ChatGPT<em>全网</em>最热话题.docx OpenAI 闭门讨论会V3纪要【GPT-4】.pdf chatgpt中文调教指南.pdf 利用ChatGPT赚钱的24种方法.pdf 视频号发展方向和变现案例：第一时间@四嘉壹新媒体.pdf 【新榜】2023内容产业年度报告...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/liudongliang125/26323522"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-12-26323522-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"12","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/liudongliang125/26323522"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/liudongliang125/26323522" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-12-26323522-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"12","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/liudongliang125/26323522"}'  data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-26323522-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-26323522-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">配置Zabbix3.4及4.0版本通过企业微信报警（<em>全网</em>最<em>详细</em>）.docx</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">09-30</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/liudongliang125/26323522" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-12-26323522-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"12","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/liudongliang125/26323522"}'  data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-26323522-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-26323522-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">配置Zabbix3.4及4.0版本通过企业微信报警（<em>全网</em>最<em>详细</em>）</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/unbelievevc/87779740"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-13-87779740-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"13","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/unbelievevc/87779740"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/unbelievevc/87779740" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-13-87779740-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"13","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/unbelievevc/87779740"}'  data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-13-87779740-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-13-87779740-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">66个ChatGPT<em>全网</em>最热话题.pdf</div>
					<div class="tag">最新发布</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">05-13</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/unbelievevc/87779740" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-13-87779740-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"13","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/unbelievevc/87779740"}'  data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-13-87779740-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-13-87779740-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">chatgpt资料</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/m0_54042402/article/details/117930650"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-14-117930650-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"14","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/m0_54042402/article/details/117930650"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/m0_54042402/article/details/117930650" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-14-117930650-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"14","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/m0_54042402/article/details/117930650"}'  data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-14-117930650-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-14-117930650-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>node</em>入门</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/m0_54042402" target="_blank"><span class="blog-title">m0_54042402的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">06-15</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					156
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/m0_54042402/article/details/117930650" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-14-117930650-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"14","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/m0_54042402/article/details/117930650"}'  data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-14-117930650-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-14-117930650-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">01-<em>node</em>

1.介绍
<em>Node.js</em> 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何<em>项目</em>的流行工具！
2.快速入门
首先安装<em>node</em>js，这里自行安装，创建js文件，我这里创建的是hello.js,<em>代码</em>如下

   var hh=&quot;hello world&quot;
   console.log(hh)

使用cmd进入这个文件夹下，然后执行(<em>node</em> 文件名），<em>代码</em>及结果如下：


3.写文件
这里需要说明的是，写入成功的话，error为null，写入失败的话，error是个</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_15041931/article/details/106935641"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-15-106935641-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"15","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_15041931/article/details/106935641"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/qq_15041931/article/details/106935641" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-15-106935641-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"15","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_15041931/article/details/106935641"}'  data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-15-106935641-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-15-106935641-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>Node</em>JS全栈开发一个功能完善的Express<em>项目</em>（附完整源码）</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_15041931" target="_blank"><span class="blog-title">qq_15041931的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">06-24</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					9624
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/qq_15041931/article/details/106935641" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-15-106935641-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"15","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/qq_15041931/article/details/106935641"}'  data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-15-106935641-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-15-106935641-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1"><em>Node.js</em>对<em>前端</em>来说无疑具有里程碑意义，与其越来越流行的今天，掌握 <em>Node.js</em> 技术已经不仅仅是加分项，而是<em>前端</em>攻城师们必须要掌握的一项技能。而 Express 基于 <em>Node.js</em> 平台，快速、开放、极简的 Web 开发框架，成为 <em>Node.js</em> 最流行的框架，所以使用 Express 进行 web 服务端的开发是个不错且可信赖的选择。但是 Express 初始化后，并不马上就是一个开箱即用，各种功能完善的 web 服务端<em>项目</em>，例如：MySQL 连接、jwt-token 认证、md5 加密、中间件</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/cjs1534717040/article/details/125783665"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-16-125783665-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"16","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/cjs1534717040/article/details/125783665"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/cjs1534717040/article/details/125783665" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-16-125783665-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"16","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/cjs1534717040/article/details/125783665"}'  data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-16-125783665-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-16-125783665-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1"><em>node</em>JS优雅写<em>代码</em>:使用别名并配置Webstorm正确识别</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/cjs1534717040" target="_blank"><span class="blog-title">cjs1534717040的专栏</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">07-14</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					542
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/cjs1534717040/article/details/125783665" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-16-125783665-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"16","strategy":"2~default~CTRLIST~Rate","dest":"https://blog.csdn.net/cjs1534717040/article/details/125783665"}'  data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-16-125783665-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-16-125783665-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1"><em>node</em>JS配置<em>项目</em>路径别名以及如何让webstorm完美识别。</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/m0_46360532/article/details/126686932"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-126686932-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/m0_46360532/article/details/126686932"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/m0_46360532/article/details/126686932" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-126686932-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/m0_46360532/article/details/126686932"}'  data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-126686932-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-126686932-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">【<em>Node.js</em><em>项目</em>】大事件<em>项目</em>：后台架构图（含具体技术栈）、典型<em>代码</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/m0_46360532" target="_blank"><span class="blog-title">Zhou_LC的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-04</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					986
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/m0_46360532/article/details/126686932" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-126686932-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/m0_46360532/article/details/126686932"}'  data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-126686932-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-126686932-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1">配置目录 config：存放 jwt 的密钥以及过期时间
参数校验目录 schema ：存放入参校验规则，配合 router 目录下的路由文件进行校验规则的绑定</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_chatgpt clearfix" data-url="https://wenku.csdn.net/answer/61003bdf5d2747a6835c069907df5afe"  data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-18-61003bdf5d2747a6835c069907df5afe-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"18","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/61003bdf5d2747a6835c069907df5afe"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://wenku.csdn.net/answer/61003bdf5d2747a6835c069907df5afe" class="tit" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-18-61003bdf5d2747a6835c069907df5afe-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"18","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/61003bdf5d2747a6835c069907df5afe"}'  data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-61003bdf5d2747a6835c069907df5afe-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-61003bdf5d2747a6835c069907df5afe-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
					<div class="left ellipsis-online ellipsis-online-1">java后端开发<em>全网</em>最全学习路线图</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block"></span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://wenku.csdn.net/answer/61003bdf5d2747a6835c069907df5afe" target="_blank"  data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-18-61003bdf5d2747a6835c069907df5afe-blog-102673258.235^v38^pc_relevant_sort_base2\",\"dist_request_id\":\"1688003439960_65686\"}","dist_request_id":"1688003439960_65686","ab_strategy":"relrec_rankmodel_rf","index":"18","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/61003bdf5d2747a6835c069907df5afe"}'  data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-61003bdf5d2747a6835c069907df5afe-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-61003bdf5d2747a6835c069907df5afe-blog-102673258.235%5Ev38%5Epc_relevant_sort_base2'>
				<div class="desc ellipsis-online ellipsis-online-1"></div>
			</a>
		</div>
	</div>
</div>
              </div>
<div id="recommendNps" class="recommend-nps-box common-nps-box">
  <h3 class="aside-title">“相关推荐”对你有帮助么？</h3>
  <div class="aside-content">
      <ul class="newnps-list">
          <li class="newnps-item" data-type="非常没帮助">
              <div class="newnps-img-box">
                  <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel1.png" alt="">
                  <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey1.png" alt="">
              </div>
              <div class="newnps-text">非常没帮助</div>
          </li>
          <li class="newnps-item" data-type="没帮助">
              <div class="newnps-img-box">
                  <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel2.png" alt="">
                  <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey2.png" alt="">
              </div>
              <div class="newnps-text">没帮助</div>
          </li>
          <li class="newnps-item" data-type="一般">
              <div class="newnps-img-box">
                  <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel3.png" alt="">
                  <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey3.png" alt="">
              </div>
              <div class="newnps-text">一般</div>
          </li>
          <li class="newnps-item" data-type="有帮助">
              <div class="newnps-img-box">
                  <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel4.png" alt="">
                  <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey4.png" alt="">
              </div>
              <div class="newnps-text">有帮助</div>
          </li>
          <li class="newnps-item" data-type="非常有帮助">
              <div class="newnps-img-box">
                  <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel5.png" alt="">
                  <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey5.png" alt="">
              </div>
              <div class="newnps-text">非常有帮助</div>
          </li>
      </ul>
      <div class="newnps-form-box">
      <div class="newnps-form">
          <input type="text" placeholder="请输入建议或反馈后点击提交" class="newnps-input">
          <span class="newnps-btn">提交</span>
      </div>
      </div>
  </div>
</div><div class="blog-footer-bottom" style="margin-top:10px;"></div>
<script src="https://g.csdnimg.cn/common/csdn-footer/csdn-footer.js" data-isfootertrack="false" type="text/javascript"></script>
<script type="text/javascript">
    window.csdn.csdnFooter.options = {
        el: '.blog-footer-bottom',
        type: 2
    }
</script>          </main>
<aside class="blog_container_aside">
<div id="asideProfile" class="aside-box">
    <div class="profile-intro d-flex">
        <div class="avatar-box d-flex justify-content-center flex-column">
            <a href="https://blog.csdn.net/heshihu2019" target="_blank" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4121","dest":"https://blog.csdn.net/heshihu2019","ab":"new"}'>
                <img src="https://profile-avatar.csdnimg.cn/default.jpg!1" class="avatar_pic">
            </a>
        </div>
        <div class="user-info d-flex flex-column profile-intro-name-box">
            <div class="profile-intro-name-boxTop">
                <a href="https://blog.csdn.net/heshihu2019" target="_blank" class="" id="uid" title="程序员达芬奇" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4122","dest":"https://blog.csdn.net/heshihu2019","ab":"new"}'>
                    <span class="name " username="heshihu2019">程序员达芬奇</span>
                </a>
                <span>
                </span>
                <span class="flag expert-blog">
                <span class="bubble">CSDN认证博客专家</span>
                </span>
                <span class="flag company-blog">
                <span class="bubble">CSDN认证企业博客</span>
                </span>
            </div>
            <div class="profile-intro-name-boxFooter">
                <span class="personal-home-page personal-home-years" title="已加入 CSDN 5年">码龄5年</span>
                    <span class="personal-home-page">
                    <a class="personal-home-certification" href="https://i.csdn.net/#/uc/profile?utm_source=14998968" target="_blank" title="暂无认证">
                    <img src="https://csdnimg.cn/identity/nocErtification.png" alt="">
                    暂无认证
                    </a>
                    </span>
            </div>
        </div>
    </div>
    <div class="data-info d-flex item-tiling">
        <dl class="text-center" title="80">
            <a href="https://blog.csdn.net/heshihu2019" data-report-click='{"mod":"1598321000_001","spm":"1001.2101.3001.4310"}' data-report-query="t=1">  
                <dt><span class="count">80</span></dt>
                <dd class="font">原创</dd>
            </a>
        </dl>
        <dl class="text-center" data-report-click='{"mod":"1598321000_002","spm":"1001.2101.3001.4311"}' title="26399">
            <a href="https://blog.csdn.net/rank/list/weekly" target="_blank">
                <dt><span class="count">2万+</span></dt>
                <dd class="font">周排名</dd>
            </a>
        </dl>
        <dl class="text-center" title="19965">
            <a href="https://blog.csdn.net/rank/list/total" data-report-click='{"mod":"1598321000_003","spm":"1001.2101.3001.4312"}' target="_blank">
                <dt><span class="count">1万+</span></dt>
                <dd class="font">总排名</dd>
            </a>
        </dl>
        <dl class="text-center" style="min-width:58px" title="37462">  
            <dt><span class="count">3万+</span></dt>
            <dd>访问</dd>
        </dl>
        <dl class="text-center" title="4级,点击查看等级说明">
            <dt><a href="https://blog.csdn.net/blogdevteam/article/details/103478461" target="_blank">
                <img class="level" src="https://csdnimg.cn/identity/blog4.png">
            </a>
            </dt>
            <dd>等级</dd>
        </dl>
    </div>
    <div class="item-rank"></div>
    <div class="data-info d-flex item-tiling">
        <dl class="text-center" title="966">
            <dt><span class="count">966</span></dt>
            <dd>积分</dd>
        </dl>
         <dl class="text-center" id="fanBox" title="18">
            <dt><span class="count" id="fan">18</span></dt>
            <dd>粉丝</dd>
        </dl>
        <dl class="text-center" title="8">
            <dt><span class="count">8</span></dt>
            <dd>获赞</dd>
        </dl>
        <dl class="text-center" title="4">
            <dt><span class="count">4</span></dt>
            <dd>评论</dd>
        </dl>
        <dl class="text-center" title="64">
            <dt><span class="count">64</span></dt>
            <dd>收藏</dd>
        </dl>
    </div>
    <div class="aside-box-footer" data-report-view='{"spm":"3001.4296"}'>
        <div class="badge-box d-flex">
            <div class="badge d-flex">
                <div class="icon-badge" title="博客之星–参与">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/76b1d0d897bc4bdabc11a5d89fe552d3.png" alt="博客之星–参与">
                    </div>
                </div>
                <div class="icon-badge" title="持续创作">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/chizhiyiheng@240.png" alt="持续创作">
                    </div>
                </div>
                <div class="icon-badge" title="勤写标兵">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/4bd50883a213407795a31d33d99b94d6.png" alt="勤写标兵">
                    </div>
                </div>
                <div class="icon-badge" title="1024勋章">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/1024@240.png" alt="1024勋章">
                    </div>
                </div>
                <div class="icon-badge" title="笔耕不辍">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/02d34b42a3ee476fb50850304ab67017.png" alt="笔耕不辍">
                    </div>
                </div>
                <div class="icon-badge" title="创作能手">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/qixiebiaobing4@240.png" alt="创作能手">
                    </div>
                </div>
                <div class="icon-badge" title="阅读者勋章">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/yuedu3@240.png" alt="阅读者勋章">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="profile-intro-name-boxOpration">
        <div class="opt-letter-watch-box">
        <a class="bt-button personal-letter" href="https://im.csdn.net/chat/heshihu2019" target="_blank" rel="noopener">私信</a>
        </div>
        <div class="opt-letter-watch-box"> 
            <a class="personal-watch bt-button" id="btnAttent" >关注</a>  
        </div>
    </div>
</div>
<div id="asideSearchArticle" class="aside-box">
	<div class="aside-content search-comter">
    <div class="aside-search aside-search-blog">         
        <input type="text" class="input-serch-blog" name="" autocomplete="off" value="" id="search-blog-words" placeholder="搜博主文章">
        <a class="btn-search-blog" data-report-click='{"spm":"1001.2101.3001.9182"}'>
                    <img src="//csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042">
        </a>
    </div>
    </div>
</div>


<div id="asideHotArticle" class="aside-box">
	<h3 class="aside-title">热门文章</h3>
	<div class="aside-content">
		<ul class="hotArticle-list">
			<li>
				<a href="https://blog.csdn.net/heshihu2019/article/details/116432062" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/heshihu2019/article/details/116432062","ab":"new"}'>
				Array 数组
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					<span class="read">5336</span>
                </a>
			</li>
			<li>
				<a href="https://blog.csdn.net/heshihu2019/article/details/125760798" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/heshihu2019/article/details/125760798","ab":"new"}'>
				关于mysql group_concat不得不说的事
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					<span class="read">2097</span>
                </a>
			</li>
			<li>
				<a href="https://blog.csdn.net/heshihu2019/article/details/125980633" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/heshihu2019/article/details/125980633","ab":"new"}'>
				php使用sqlserver
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					<span class="read">1654</span>
                </a>
			</li>
			<li>
				<a href="https://blog.csdn.net/heshihu2019/article/details/116406642" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/heshihu2019/article/details/116406642","ab":"new"}'>
				Float 浮点型
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					<span class="read">1311</span>
                </a>
			</li>
			<li>
				<a href="https://blog.csdn.net/heshihu2019/article/details/102673258" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/heshihu2019/article/details/102673258","ab":"new"}'>
				这可能是全网最详细的Node.js编程
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
					<span class="read">1276</span>
                </a>
			</li>
		</ul>
	</div>
</div>
<div id="asideCategory" class="aside-box flexible-box">
    <h3 class="aside-title">分类专栏</h3>
    <div class="aside-content">
        <ul>
            <li>
                <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12204130.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12204130.html","ab":"new"}'>
                    <div class="special-column-bar "></div>
                    <img src="https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        以码之名
                    </span>
                </a>
                <span class="special-column-num">8篇</span>
            </li>
            <li>
                <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_11031477.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_11031477.html","ab":"new"}'>
                    <div class="special-column-bar "></div>
                    <img src="https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        php大杂烩
                    </span>
                </a>
                <span class="special-column-num">49篇</span>
            </li>
            <li>
                <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_11881970.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_11881970.html","ab":"new"}'>
                    <div class="special-column-bar "></div>
                    <img src="https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        php进阶
                    </span>
                </a>
                <span class="special-column-num">22篇</span>
            </li>
            <li>
                <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12355139.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12355139.html","ab":"new"}'>
                    <div class="special-column-bar "></div>
                    <img src="https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        docker
                    </span>
                </a>
                <span class="special-column-num">2篇</span>
            </li>
            <li>
                <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12346282.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12346282.html","ab":"new"}'>
                    <div class="special-column-bar "></div>
                    <img src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        linux
                    </span>
                </a>
                <span class="special-column-num">1篇</span>
            </li>
            <li>
                <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12315618.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12315618.html","ab":"new"}'>
                    <div class="special-column-bar "></div>
                    <img src="https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        拥抱开源
                    </span>
                </a>
                <span class="special-column-num">1篇</span>
            </li>
            <li>
                <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_11698971.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_11698971.html","ab":"new"}'>
                    <div class="special-column-bar "></div>
                    <img src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        前端
                    </span>
                </a>
                <span class="special-column-num">3篇</span>
            </li>
        </ul>
    </div>
    <p class="text-center">
        <a class="flexible-btn" data-fbox="aside-archive"><img class="look-more" src="https://csdnimg.cn/release/blogv2/dist/pc/img/arrowDownWhite.png" alt=""></a>
    </p>
</div>
<div id="asideNewComments" class="aside-box">
    <h3 class="aside-title">最新评论</h3>
    <div class="aside-content">
        <ul class="newcomment-list">
            <li>
                <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/heshihu2019/article/details/102017185#comments_16624033" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102017185#comments_16624033","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102017185#comments_16624033","ab":"new"}'>复习tp3.23（七）（Action参数绑定,空操作和空控制器,初始化、前置和后置操作,页面跳转和重定向,页面请求和AJAX,伪静态,操作绑定到类,多层控制器,自动验证,自动完成）</a>
                <p class="comment ellipsis">
                    <a href="https://blog.csdn.net/qq_45937199" class="user-name" target="_blank">ctotalk: </a>
                    <span class="code-comments">学习了</span>
                </p>
            </li>
            <li>
                <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360369" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360369","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360369","ab":"new"}'>一个开源cms</a>
                <p class="comment ellipsis">
                    <a href="https://blog.csdn.net/csdnloveer" class="user-name" target="_blank">csdnloveer</a>
                    <span class="reply"> 回复 </span>
                    <span class="code-comments">程序员达芬奇: 我开发的哈哈</span>
                </p>
            </li>
            <li>
                <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360153" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360153","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360153","ab":"new"}'>一个开源cms</a>
                <p class="comment ellipsis">
                    <a href="https://blog.csdn.net/heshihu2019" class="user-name" target="_blank">程序员达芬奇</a>
                    <span class="reply"> 回复 </span>
                    <span class="code-comments">csdnloveer: 是的</span>
                </p>
            </li>
            <li>
                <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360125" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360125","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/heshihu2019/article/details/102823866#comments_11360125","ab":"new"}'>一个开源cms</a>
                <p class="comment ellipsis">
                    <a href="https://blog.csdn.net/csdnloveer" class="user-name" target="_blank">csdnloveer: </a>
                    <span class="code-comments">这个 lbcms 也不错 http://www.lbcms.top</span>
                </p>
            </li>
        </ul>
    </div>
</div>
<div id="asideNewNps" class="aside-box common-nps-box">
    <h3 class="aside-title">您愿意向朋友推荐“博客详情页”吗？</h3>
    <div class="aside-content">
        <ul class="newnps-list">
            <li class="newnps-item" data-type="强烈不推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel1.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey1.png" alt="">
                </div>
                <div class="newnps-text">强烈不推荐</div>
            </li>
            <li class="newnps-item" data-type="不推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel2.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey2.png" alt="">
                </div>
                <div class="newnps-text">不推荐</div>
            </li>
            <li class="newnps-item" data-type="一般般">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel3.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey3.png" alt="">
                </div>
                <div class="newnps-text">一般般</div>
            </li>
            <li class="newnps-item" data-type="推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel4.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey4.png" alt="">
                </div>
                <div class="newnps-text">推荐</div>
            </li>
            <li class="newnps-item" data-type="强烈推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel5.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey5.png" alt="">
                </div>
                <div class="newnps-text">强烈推荐</div>
            </li>
        </ul>
        <div class="newnps-form-box">
        <div class="newnps-form">
            <input type="text" placeholder="请输入建议或反馈后点击提交" class="newnps-input">
            <span class="newnps-btn">提交</span>
        </div>
        </div>
    </div>
</div>
<div id="asideArchive" class="aside-box" style="display:block!important; width:300px;">
    <h3 class="aside-title">最新文章</h3>
    <div class="aside-content">
        <ul class="inf_list clearfix">
            <li class="clearfix">
            <a href="https://blog.csdn.net/heshihu2019/article/details/131382503" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/heshihu2019/article/details/131382503","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/heshihu2019/article/details/131382503","ab":"new"}'>细说设计模式</a>
            </li>
            <li class="clearfix">
            <a href="https://blog.csdn.net/heshihu2019/article/details/131372088" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/heshihu2019/article/details/131372088","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/heshihu2019/article/details/131372088","ab":"new"}'>php 目录</a>
            </li>
            <li class="clearfix">
            <a href="https://blog.csdn.net/heshihu2019/article/details/131324266" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/heshihu2019/article/details/131324266","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/heshihu2019/article/details/131324266","ab":"new"}'>mysql常见问题</a>
            </li>
        </ul>
        <div class="archive-bar"></div>
        <div class="archive-box">
                <div class="archive-list-item"><a href="https://blog.csdn.net/heshihu2019?type=blog&amp;year=2023&amp;month=06" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/heshihu2019?type=blog&amp;year=2023&amp;month=06"}'><span class="year">2023年</span><span class="num">14篇</span></a></div>
                <div class="archive-list-item"><a href="https://blog.csdn.net/heshihu2019?type=blog&amp;year=2022&amp;month=11" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/heshihu2019?type=blog&amp;year=2022&amp;month=11"}'><span class="year">2022年</span><span class="num">22篇</span></a></div>
                <div class="archive-list-item"><a href="https://blog.csdn.net/heshihu2019?type=blog&amp;year=2021&amp;month=05" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/heshihu2019?type=blog&amp;year=2021&amp;month=05"}'><span class="year">2021年</span><span class="num">10篇</span></a></div>
                <div class="archive-list-item"><a href="https://blog.csdn.net/heshihu2019?type=blog&amp;year=2019&amp;month=12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/heshihu2019?type=blog&amp;year=2019&amp;month=12"}'><span class="year">2019年</span><span class="num">39篇</span></a></div>
        </div>
    </div>
</div>
	<div id="footerRightAds" class="isShowFooterAds">
		<div class="aside-box">
			<div id="kp_box_57" data-pid="57"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1076724771190722"
     crossorigin="anonymous"></script>
<!-- PC-博客-详情页-左下视窗-全量 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1076724771190722"
     data-ad-slot="7553470938"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><img class="pre-img-lasy" data-src="https://kunyu.csdn.net/1.png?p=57&adId=1033838&adBlockFlag=0&a=1033838&c=0&k=这可能是全网最详细的Node.js编程&spm=1001.2101.3001.5001&articleId=102673258&d=1&t=3&u=fd906e2c10624c68a182aec81febfc40" style="display: block;width: 0px;height: 0px;"></div>
		</div>
	</div>
    <!-- 详情页显示目录 -->
<!--文章目录-->
<div id="asidedirectory" class="aside-box">
    <div class='groupfile' id="directory">
        <h3 class="aside-title">目录</h3>
        <div class="align-items-stretch group_item">
            <div class="pos-box">
            <div class="scroll-box">
                <div class="toc-box"></div>
            </div>
            </div>
        </div>
    </div>
</div>
</aside>
<script>
	$("a.flexible-btn").click(function(){
		$(this).parents('div.aside-box').removeClass('flexible-box');
		$(this).parents("p.text-center").remove();
	})
</script>
<script type="text/javascript"  src="https://g.csdnimg.cn/user-tooltip/2.7/user-tooltip.js"></script>
<script type="text/javascript"  src="https://g.csdnimg.cn/user-medal/2.0.0/user-medal.js"></script>        </div>
<div class="recommend-right align-items-stretch clearfix" id="rightAside" data-type="recommend">
    <aside class="recommend-right_aside">
        <div id="recommend-right" >
                                <div class="programmer1Box">
                        <div id="kp_box_530" data-pid="530"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1076724771190722"
     crossorigin="anonymous"></script>
<!-- PC-博客-详情页-右上视窗-全量 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1076724771190722"
     data-ad-slot="8674980912"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><img class="pre-img-lasy" data-src="https://kunyu.csdn.net/1.png?p=530&adId=1033837&adBlockFlag=0&a=1033837&c=0&k=这可能是全网最详细的Node.js编程&spm=1001.2101.3001.4647&articleId=102673258&d=1&t=3&u=3fb2c708bb0140b283338639e20bd3cf" style="display: block;width: 0px;height: 0px;"></div>
                    </div>
            <div class='flex-column aside-box groupfile' id="groupfile">
                <div class="groupfile-div">
                <h3 class="aside-title">目录</h3>
                <div class="align-items-stretch group_item">
                    <div class="pos-box">
                        <div class="scroll-box">
                            <div class="toc-box"></div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class='aside-box kind_person d-flex flex-column'>
                    <h3 class="aside-title">分类专栏</h3>
                    <div class="align-items-stretch kindof_item" id="kind_person_column">
                        <div class="aside-content">
                            <ul>
                                <li>
                                    <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12204130.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12204130.html","ab":"new"}'>
                                        <div class="special-column-bar "></div>
                                        <img src="https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="">
                                            以码之名
                                        </span>
                                    </a>
                                    <span class="special-column-num">8篇</span>
                                </li>
                                <li>
                                    <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_11031477.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_11031477.html","ab":"new"}'>
                                        <div class="special-column-bar "></div>
                                        <img src="https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="">
                                            php大杂烩
                                        </span>
                                    </a>
                                    <span class="special-column-num">49篇</span>
                                </li>
                                <li>
                                    <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_11881970.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_11881970.html","ab":"new"}'>
                                        <div class="special-column-bar "></div>
                                        <img src="https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="">
                                            php进阶
                                        </span>
                                    </a>
                                    <span class="special-column-num">22篇</span>
                                </li>
                                <li>
                                    <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12355139.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12355139.html","ab":"new"}'>
                                        <div class="special-column-bar "></div>
                                        <img src="https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="">
                                            docker
                                        </span>
                                    </a>
                                    <span class="special-column-num">2篇</span>
                                </li>
                                <li>
                                    <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12346282.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12346282.html","ab":"new"}'>
                                        <div class="special-column-bar "></div>
                                        <img src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="">
                                            linux
                                        </span>
                                    </a>
                                    <span class="special-column-num">1篇</span>
                                </li>
                                <li>
                                    <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_12315618.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_12315618.html","ab":"new"}'>
                                        <div class="special-column-bar "></div>
                                        <img src="https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="">
                                            拥抱开源
                                        </span>
                                    </a>
                                    <span class="special-column-num">1篇</span>
                                </li>
                                <li>
                                    <a class="clearfix special-column-name"  href="https://blog.csdn.net/heshihu2019/category_11698971.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/heshihu2019/category_11698971.html","ab":"new"}'>
                                        <div class="special-column-bar "></div>
                                        <img src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="">
                                            前端
                                        </span>
                                    </a>
                                    <span class="special-column-num">3篇</span>
                                </li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
    </aside>
</div>

<div class="recommend-right1  align-items-stretch clearfix" id="rightAsideConcision" data-type="recommend">
    <aside class="recommend-right_aside">
        <div id="recommend-right-concision" >
            <div class='flex-column aside-box groupfile' id="groupfileConcision">
                <div class="groupfile-div1">
                <h3 class="aside-title">目录</h3>
                <div class="align-items-stretch group_item">
                    <div class="pos-box">
                        <div class="scroll-box">
                            <div class="toc-box"></div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </aside>
</div>

      </div>
      <div class="mask-dark"></div>
      <div class="skin-boxshadow"></div>
      <div class="directory-boxshadow"></div>
<div class="comment-side-box-shadow comment-side-tit-close" id="commentSideBoxshadow">
<div class="comment-side-content">
	<div class="comment-side-tit">
		<span class="comment-side-tit-count">评论</span>	
	<img class="comment-side-tit-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></div>
	<div id="pcCommentSideBox" class="comment-box comment-box-new2 " style="display:block">
		<div class="comment-edit-box d-flex">
			<div class="user-img">
				<a href="https://blog.csdn.net/sachuangwei" target="_blank">
					<img src="https://profile-avatar.csdnimg.cn/c6074bfdfdc64c4c8582102da08bf8ff_sachuangwei.jpg!1">
				</a>
			</div>
			<form id="commentform">
				<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="欢迎高质量的评论，低质的评论会被折叠" maxlength="1000"></textarea>
				<div class="comment-reward-box" style="background-image: url('https://img-home.csdnimg.cn/images/20230131025301.png');">
          <a class="btn-remove-reward"></a>
          <div class="form-reward-box">
            <div class="info">
              成就一亿技术人!
            </div>
            <div class="price-info">
              拼手气红包<span class="price">6.0元</span>
            </div>
          </div>
        </div>
        <div class="comment-operate-box">
					<div class="comment-operate-l">
						<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
					</div>
					<div class="comment-operate-c">
						&nbsp;
					</div>
					<div class="comment-operate-r">
            <div class="comment-operate-item comment-reward">
							<img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentReward.png" alt="红包">
							<span class="comment-operate-tip">添加红包</span>
						</div>
						<div class="comment-operate-item comment-emoticon">
							<img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentEmotionIcon.png" alt="表情包">
							<span class="comment-operate-tip">插入表情</span>
							<div class="comment-emoticon-box comment-operate-isshow">
								<div class="comment-emoticon-img-box"></div>
							</div>
						</div>
						<div class="comment-operate-item comment-code">
							<img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentCodeIcon.png" alt="表情包">
							<span class="comment-operate-tip">代码片</span>
							<div class="comment-code-box comment-operate-isshow">
								<ul id="commentCode">
									<li><a data-code="html">HTML/XML</a></li>
									<li><a data-code="objc">objective-c</a></li>
									<li><a data-code="ruby">Ruby</a></li>
									<li><a data-code="php">PHP</a></li>
									<li><a data-code="csharp">C</a></li>
									<li><a data-code="cpp">C++</a></li>
									<li><a data-code="javascript">JavaScript</a></li>
									<li><a data-code="python">Python</a></li>
									<li><a data-code="java">Java</a></li>
									<li><a data-code="css">CSS</a></li>
									<li><a data-code="sql">SQL</a></li>
									<li><a data-code="plain">其它</a></li>
								</ul>
							</div>
						</div>
						<div class="comment-operate-item">
							<input type="hidden" id="comment_replyId" name="comment_replyId">
							<input type="hidden" id="article_id" name="article_id" value="102673258">
							<input type="hidden" id="comment_userId" name="comment_userId" value="">
							<input type="hidden" id="commentId" name="commentId" value="">
							<a data-report-click='{"mod":"1582594662_003","spm":"1001.2101.3001.4227","ab":"new"}'>
							<input type="submit" class="btn-comment btn-comment-input" value="评论">
							</a>
						</div>
					</div>
				</div>
			</form>
		</div>
		<div class="comment-list-container">
			<div class="comment-list-box comment-operate-item">
			</div>
			<div id="lookFlodComment" class="look-flod-comment">
					<span class="count"></span>&nbsp;条评论被折叠&nbsp;<a class="look-more-flodcomment">查看</a>
			</div>
			<div class="opt-box text-center">
				<div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div>
			</div>
		</div>
	</div>
	<div id="pcFlodCommentSideBox" class="pc-flodcomment-sidebox">
		<div class="comment-fold-tit"><span id="lookUnFlodComment" class="back"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowLeftWhite.png" alt=""></span>被折叠的&nbsp;<span class="count"></span>&nbsp;条评论
		 <a href="https://blogdev.blog.csdn.net/article/details/122245662" class="tip" target="_blank">为什么被折叠?</a>
		 <a href="https://bbs.csdn.net/forums/FreeZone" class="park" target="_blank">
		 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/iconPark.png">到【灌水乐园】发言</a>                                
		</div>
		<div class="comment-fold-content"></div>
		<div id="lookBadComment" class="look-bad-comment side-look-comment">
			<a class="look-more-comment">查看更多评论<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowDownWhite.png" alt=""></a>
		</div>
	</div>
</div>
<div class="comment-rewarddialog-box">
  <div class="form-box">
    <div class="title-box">
      添加红包
      <a class="btn-form-close"></a>
    </div>
    <form id="commentRewardForm">
      <div class="ipt-box">
        <label for="txtName">祝福语</label>
        <div class="ipt-btn-box">
          <input type="text" name="name" id="txtName" autocomplete="off" maxlength="50">
          <a class="btn-ipt btn-random"></a>
        </div>
        <p class="notice">请填写红包祝福语或标题</p>
      </div>
      <div class="ipt-box">
        <label for="txtSendAmount">红包数量</label>
        <div class="ipt-txt-box">
          <input type="text" name="sendAmount" maxlength="4" id="txtSendAmount" placeholder="请填写红包数量(最小10个)" autocomplete="off">
          <span class="after-txt">个</span>
        </div>
        <p class="notice">红包个数最小为10个</p>
      </div>
      <div class="ipt-box">
        <label for="txtMoney">红包总金额</label>
        <div class="ipt-txt-box error">
          <input type="text" name="money" maxlength="5" id="txtMoney" placeholder="请填写总金额(最低5元)" autocomplete="off">
          <span class="after-txt">元</span>
        </div>
        <p class="notice">红包金额最低5元</p>
      </div>
      <div class="balance-info-box">
        <label>余额支付</label>
        <div class="balance-info">
          当前余额<span class="balance">3.43</span>元
          <a href="https://i.csdn.net/#/wallet/balance/recharge" class="link-charge" target="_blank">前往充值 ></a>
        </div>
      </div>
      <div class="opt-box">
        <div class="pay-info">
          需支付：<span class="price">10.00</span>元
        </div>
        <button type="button" class="ml-auto btn-cancel">取消</button>
        <button type="button" class="ml8 btn-submit" disabled="true">确定</button>
      </div>
    </form>
  </div>
</div>
<div class="rr-guide-box">
  <div class="rr-first-box">
    <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward02.png" alt="">
    <button class="btn-guide-known next">下一步</button>
  </div>
  <div class="rr-second-box">
    <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward03.png" alt="">
    <button class="btn-guide-known known">知道了</button>
  </div>
</div>
</div>

<div class="redEnvolope" id="redEnvolope">
  <div class="env-box">
    <div class="env-container">
      <div class="pre-open" id="preOpen">
        <div class="top">
          <header>
            <img class="clearTpaErr" :src="redpacketAuthor.avatar" alt="" />
            <div class="author">成就一亿技术人!</div>
          </header>
          <div class="bot-icon"></div>
        </div>
        <footer>
          <div class="red-openbtn open-start"></div>
          <div class="tip">
            领取后你会自动成为博主和红包主的粉丝
            <a class="rule" target="_blank">规则</a>
          </div>
        </footer>
      </div>
      <div class="opened" id="opened">
        <div class="bot-icon">
          <header>
            <a class="creatorUrl" href="" target="_blank">
              <img class="clearTpaErr" src="https://profile-avatar.csdnimg.cn/default.jpg!2" alt="" />
            </a>
            <div class="author">
              <div class="tt">hope_wisdom</div> 发出的红包
            </div>
          </header>
        </div>
        <div class="receive-box">
          <header></header>
          <div class="receive-list">
          </div>
        </div>
      </div>
    </div>
    <div class="close-btn"></div>
  </div>
</div>
<div id="rewardNew" class="reward-popupbox-new">
	<p class="rewad-title">打赏作者<span class="reward-close"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></span></p>
	<dl class="profile-box">
		<dd>
		<a href="https://blog.csdn.net/heshihu2019" data-report-click='{"mod":"popu_379","dest":"https://blog.csdn.net/heshihu2019","ab":"new"}'>
			<img src="https://profile-avatar.csdnimg.cn/default.jpg!1" class="avatar_pic">
		</a>
		</dd>
		<dt>
			<p class="blog-name">程序员达芬奇</p>
			<p class="blog-discript">你的鼓励将是我创作的最大动力</p>
		</dt>
	</dl>
	<div class="reward-box-new">
			<div class="reward-content"><div class="reward-right"></div></div>
	</div>
	<div class="money-box">
    <span class="choose-money choosed" data-id="1">¥1</span>
    <span class="choose-money " data-id="2">¥2</span>
    <span class="choose-money " data-id="4">¥4</span>
    <span class="choose-money " data-id="6">¥6</span>
    <span class="choose-money " data-id="10">¥10</span>
    <span class="choose-money " data-id="20">¥20</span>
	</div>
	<div class="sure-box">
		<div class="sure-box-money">
			<div class="code-box">
				<div class="code-num-box">
					<span class="code-name">扫码支付：</span><span class="code-num">¥1</span>
				</div>
				<div class="code-img-box">
					<div class="renovate">
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png">
					<span>获取中</span>
					</div>
				</div>
				<div class="code-pay-box">
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newWeiXin.png" alt="">
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newZhiFuBao.png" alt="">
					<span>扫码支付</span>
				</div>
			</div>
		</div>
		<div class="sure-box-blance">
			<p class="tip">您的余额不足，请更换扫码支付或<a target="_blank" data-report-click='{"mod":"1597646289_003","spm":"1001.2101.3001.4302"}' href="https://i.csdn.net/#/wallet/balance/recharge?utm_source=RewardVip" class="go-invest">充值</a></p>
			<p class="is-have-money"><a class="reward-sure">打赏作者</a></p>
		</div>
	</div>
</div>
      <div class="pay-code">
      <div class="pay-money">实付<span class="pay-money-span" data-nowprice='' data-oldprice=''>元</span></div>
      <div class="content-blance"><a class="blance-bt" href="javascript:;">使用余额支付</a></div>
      <div class="content-code">
        <div id="payCode" data-id="">
          <div class="renovate">
            <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png">
            <span>点击重新获取</span>
          </div>
        </div>
        <div class="pay-style"><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span><span class="text">扫码支付</span></div>
      </div>
      <div class="bt-close">
        <svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
          <defs>
            <style type="text/css"></style>
          </defs>
          <path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path>
        </svg>
      </div>
      <div class="pay-balance">
        <input type="radio" class="pay-code-radio" data-type="details">
        <span class="span">钱包余额</span>
          <span class="balance" style="color:#FC5531;font-size:14px;">0</span>
          <div class="pay-code-tile">
            <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt="">
            <div class="pay-code-content">
              <div class="span">
                <p class="title">抵扣说明：</p>
                <p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。</p>
              </div>
            </div>
          </div>
      </div>
      <a class="pay-balance-con" href="https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span>余额充值</span></a>
    </div>
    <div style="display:none;">
      <img src="" onerror='setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74"}},3000);'>
    </div>
      <div class="keyword-dec-box" id="keywordDecBox"></div>
  </body>
  <script src="https://csdnimg.cn/release/blogv2/dist/components/js/axios-83fa28cedf.min.js" type="text/javascript"></script>
  <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_highlight-8defd55d6e.min.js" type="text/javascript"></script>
  <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_common-be82269d23.min.js" type="text/javascript"></script>
  <script src="https://csdnimg.cn/release/blogv2/dist/components/js/edit_copy_code-2d3931414f.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/atom-one-light.css">
  <script src="https://g.csdnimg.cn/user-accusation/1.0.5/user-accusation.js" type="text/javascript"></script>
  <script>
    // 全局声明
    if (window.csdn === undefined) {
      window.csdn = {};
    }
    window.csdn.sideToolbar = {
      options: {
        report: {
          isShow: true,
        },
        qr: {
          isShow: false,
        },
        guide: {
          isShow: true
        }
      }
    }
    $(function() {
      $(document).on('click', "a.option-box[data-type='report']", function() {
        window.csdn.loginBox.key({
          biz: 'blog',
          subBiz: 'other_service',
          cb: function() {
            window.csdn.feedback({
              "type": 'blog',
              "rtype": 'article',
              "rid": articleId,
              "reportedName": username,
              "submitOptions": {
                "title": articleTitle,
                "contentUrl": articleDetailUrl
              },
              "callback": function() {
                showToast({
                  text: "感谢您的举报，我们会尽快审核！",
                  bottom: '10%',
                  zindex: 9000,
                  speed: 500,
                  time: 1500
                })
              }
            })
          }
        })
      });
    })
  </script>
    <script src="https://g.csdnimg.cn/baidu-search/1.0.12/baidu-search.js" type="text/javascript"></script>
  <script src="https://csdnimg.cn/release/download/old_static/js/qrcode.js"></script>
  <script src="https://g.csdnimg.cn/lib/qrcode/1.0.0/qrcode.min.js"></script>
  <script src="https://g.csdnimg.cn/user-ordercart/3.0.1/user-ordercart.js" type="text/javascript"></script>
  <script src="https://g.csdnimg.cn/user-ordertip/5.0.1/user-ordertip.js" type="text/javascript"></script>
  <script src="https://g.csdnimg.cn/order-payment/4.0.1/order-payment.js" type="text/javascript"></script>
  <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/common-bf18866465.min.js" type="text/javascript"></script>
  <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/detail-f1f813cc08.min.js" type="text/javascript"></script>
  <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/column-3911b0dc26.min.js" type="text/javascript"></script>
  <script src="https://g.csdnimg.cn/side-toolbar/3.4/side-toolbar.js" type="text/javascript"></script>
  <script src="https://g.csdnimg.cn/copyright/1.0.4/copyright.js" type="text/javascript"></script>
  <script>
    $(".MathJax").remove();
    if ($('div.markdown_views pre.prettyprint code.hljs').length > 0) {
      $('div.markdown_views')[0].className = 'markdown_views';
    }
  </script>
  <script type="text/javascript" src="https://csdnimg.cn/release/blog_mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      "HTML-CSS": {
        linebreaks: { automatic: true, width: "94%container" },
        imageFont: null
      },
      tex2jax: {
      preview: "none",
      ignoreClass:"title-article"
      },
      mml2jax: {
      preview: 'none'
      }
    });
  </script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script></html>